/* 07/10/2026: PG - CRM-UK site stylesheet. Concept: engineering drawing sheet: cool paper, ink, green marks, title-block fact panels. */
:root {
  --paper: #f4f6f7;
  --sheet: #ffffff;
  --ink: #14212d;
  --muted: #4f5d6a;
  --line: #d3dae0;
  --grid: rgba(20, 33, 45, 0.045);
  /* 30/10/2026: PG - bright lime toned down to the dark green used for the Contact link; a lighter tone of the same green for dark backgrounds */
  /* 30/10/2026: PG - brand green #4cb070 (halfway between #52a86d and #45b772); a darker shade of the same green for text on white */
  /* 03/11/2026: PG - Site green changed from #4cb070 to #bada55 everywhere; a dark shade of it (#5a6e1f) for green text on white so it stays readable */
  /* 05/11/2026: PG - Site green changed from #bada55 to #4ba822; darker shade #357a18 for green text on white/light grey so it passes contrast */
  --lime: #4ba822;            /* brand green: fills, rules, marks, accents on dark backgrounds */
  --lime-dark-bg: #4ba822;
  --lime-text-dark: #4ba822;  /* small green text on navy (footer, dark sections) */
  --lime-ink: #357a18;        /* dark shade of the green so text on white passes contrast (05/11/2026: PG - restored after trying #4ba822) */
  --deep: #14212d;
  --on-deep: #eef2f5;
  --ok: #3d6b1f;

  /* 30/10/2026: PG - Graphik if licensed and installed as a web font, otherwise Inter (closest free match). Weights: 300 light, 400 regular, 700 bold */
  --f-display: "Graphik Web", "Graphik", "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Graphik Web", "Graphik", "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --s-1: 0.8125rem; --s0: 1.0625rem; --s1: 1.25rem; --s2: 1.6rem; --s3: 2.2rem; --s4: clamp(2.4rem, 5.2vw, 4rem);
  --max: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e161d; --sheet: #15202a; --ink: #e5ebf0; --muted: #9eabb7; --line: #2a3946;
    --grid: rgba(229, 235, 240, 0.04); --lime-ink: #4ba822; --deep: #0a1117; --on-deep: #e5ebf0; --ok: #9fd86a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e161d; --sheet: #15202a; --ink: #e5ebf0; --muted: #9eabb7; --line: #2a3946;
  --grid: rgba(229, 235, 240, 0.04); --lime-ink: #4ba822; --deep: #0a1117; --on-deep: #e5ebf0; --ok: #9fd86a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--s0); line-height: 1.6;
  /* 30/10/2026: PG - graph-paper background removed; banner images on the hero instead */
  background-size: 24px 24px;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--lime-ink); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--s4); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--s3); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: var(--s1); font-weight: 700; }
p { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--lime); color: #05080c; padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 1rem; }

.label { font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.label b { color: var(--lime-ink); font-weight: 700; }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--sheet); border-bottom: 1px solid var(--line); } /* 30/10/2026: PG - header on white (--sheet) */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
/* 07/10/2026: PG - Logo: theCRM swoosh + CRM-UK wordmark */
/* 30/10/2026: PG - Logo 5% larger (mark 46 > 48px, text 1.5 > 1.575rem) */
.logo { display: inline-flex; align-items: center; gap: .525rem; font-family: var(--f-display); font-weight: 700; font-size: 1.575rem; line-height: 1; text-decoration: none; letter-spacing: -0.02em; }
.logo img { width: 48px; height: 48px; flex: none; }
.logo .l3 { font-weight: 400; }
.logo:hover { color: inherit; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav > a, .nav summary { font-weight: 700; font-size: .95rem; text-decoration: none; padding: .5rem .65rem; border-radius: 4px; cursor: pointer; list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: " ▾"; font-size: .7em; color: var(--muted); }
.nav a[aria-current="page"], .nav summary.current { box-shadow: inset 0 -3px 0 var(--lime); }
.nav details { position: relative; }
.nav .menu { position: absolute; top: 100%; left: 0; min-width: 16rem; background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--lime); padding: .4rem; display: grid; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.nav .menu a { padding: .5rem .7rem; text-decoration: none; font-weight: 400; border-radius: 3px; }
.nav .menu a:hover, .nav .menu a[aria-current="page"] { background: var(--paper); }
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-body); font-weight: 700; font-size: .98rem; text-decoration: none; padding: .75rem 1.15rem; border: 2px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper); cursor: pointer; }
.btn:hover { background: var(--lime); border-color: var(--lime); color: #05080c; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.lime { background: var(--lime-dark-bg); border-color: var(--lime-dark-bg); color: #05080c; }
.btn.lime:hover { background: var(--on-deep); border-color: var(--on-deep); }
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; background: none; border: 2px solid var(--ink); color: var(--ink); font-weight: 700; padding: .45rem .8rem; border-radius: 3px; font-family: var(--f-body); }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--sheet); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: .5rem var(--gutter) 1rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav .menu { position: static; box-shadow: none; border: 0; padding-left: 1rem; background: transparent; }
  .nav .btn { justify-content: center; margin-top: .5rem; }
}

/* hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--lime) 70%, transparent) 62%); }
.lede { font-size: var(--s1); font-weight: 300; color: var(--muted); max-width: 38rem; margin-top: 1.25rem; line-height: 1.5; }
.ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.phone-line { margin-top: 1rem; font-family: var(--f-mono); font-size: .9rem; color: var(--muted); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* title block: facts panel, styled like an engineering drawing title block */
.titleblock { background: var(--sheet); border: 2px solid var(--ink); font-size: .95rem; }
.titleblock .tb-head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--ink); padding: .55rem .8rem; font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(90deg, var(--lime) 0 6px, transparent 6px); padding-left: 1.1rem; }
.titleblock dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.titleblock dl > div { padding: .7rem .8rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; }
.titleblock dl > div.r { border-right: 0; }
.titleblock dl > div.full { grid-column: 1 / -1; border-right: 0; }
.titleblock dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.titleblock dd { margin: .15rem 0 0; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.titleblock dd.big { font-family: var(--f-display); font-size: 1.9rem; font-weight: 700; }
.titleblock dd small { font-weight: 400; color: var(--muted); font-size: .85rem; }

/* sections */
section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec-head { display: grid; gap: .75rem; max-width: 46rem; margin-bottom: 2rem; }
.sec-head p { color: var(--muted); font-size: 1.1rem; }
.band { background: var(--sheet); border-block: 1px solid var(--line); }
.dark { background: var(--deep); color: var(--on-deep); background-image: none; }
.dark .label, .dark .sec-head p, .dark p.muted { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.dark .label b { color: var(--lime-text-dark); }
.dark a { color: var(--on-deep); }

.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.item { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--ink); min-width: 0; }
.dark .item { border-top-color: var(--lime-dark-bg); }
.item p { color: var(--muted); }
.dark .item p { color: color-mix(in srgb, var(--on-deep) 75%, transparent); }
.item a.more { font-weight: 700; margin-top: .25rem; }

/* proof strip: real figures from named customers */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--sheet); }
.proof > div { padding: 1.1rem 1rem; border-right: 1px solid var(--line); min-width: 0; }
.proof > div:last-child { border-right: 0; }
.proof .fig { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.proof .fig sup { font-size: .45em; vertical-align: .9em; }
.proof .what { margin-top: .4rem; font-weight: 700; line-height: 1.3; }
.proof .who { margin-top: .35rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lime-ink); }
.proof .who a { text-decoration: none; }
@media (max-width: 860px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof > div:nth-child(2) { border-right: 0; } .proof > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

.quote { margin: 0; display: grid; gap: .9rem; }
.quote blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.quote blockquote::before { content: "“"; color: var(--lime-ink); }
.quote blockquote::after { content: "”"; color: var(--lime-ink); }
.quote figcaption { font-size: .95rem; }
.quote figcaption b { display: block; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .5rem; }
.ticks li::before { content: ""; width: .7rem; height: .7rem; margin-top: .45rem; background: var(--lime); outline: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.cols2 { columns: 2 18rem; column-gap: 2rem; }
.cols2 li { break-inside: avoid; margin-bottom: .55rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips span, .chips a { font-family: var(--f-mono); font-size: .82rem; border: 1px solid var(--line); background: var(--sheet); padding: .35rem .6rem; border-radius: 2px; text-decoration: none; }
.chips a:hover { border-color: var(--lime); }

/* steps: a real sequence, so numbered */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: .4rem; align-content: start; }
.steps li::before { content: "Step " counter(s); font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .08em; text-transform: uppercase; color: var(--lime-ink); }
.steps p { color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 2px solid var(--ink); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font-weight: 700; font-size: 1.08rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-family: var(--f-mono); font-size: 1.3rem; color: var(--lime-ink); }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 1.2rem; color: var(--muted); max-width: 46rem; display: grid; gap: .6rem; }

/* pricing */
.price-card { background: var(--sheet); border: 2px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.price-card > div { padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; }
.price-card .pc-left { border-right: 2px solid var(--ink); display: grid; gap: .6rem; align-content: start; background: linear-gradient(180deg, var(--lime) 0 6px, transparent 6px); }
.price { font-family: var(--f-display); font-size: clamp(3.5rem, 8vw, 5rem); font-weight: 700; line-height: .95; }
@media (max-width: 760px) { .price-card { grid-template-columns: 1fr; } .price-card .pc-left { border-right: 0; border-bottom: 2px solid var(--ink); } }

/* registers (tables) */
.register { width: 100%; border-collapse: collapse; background: var(--sheet); font-size: .97rem; }
.register th, .register td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.register thead th { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); font-weight: 400; }
.register td.fig { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.register a { font-weight: 700; }
.table-scroll { overflow-x: auto; border: 2px solid var(--ink); }

/* cards linking to sub-pages (case studies, blog) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card { display: grid; gap: .5rem; align-content: start; background: var(--sheet); border: 1px solid var(--line); border-top: 4px solid var(--lime); padding: 1.1rem 1.1rem 1.25rem; text-decoration: none; min-width: 0; }
.card:hover { border-color: var(--ink); color: inherit; }
.card .label { font-size: .72rem; }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--muted); font-size: .97rem; }
.card .fig { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; }

/* long-form content from markdown */
.prose { max-width: 46rem; display: grid; gap: 1rem; min-width: 0; }
.prose > h2 { margin-top: 1.5rem; font-size: clamp(1.6rem, 3vw, 2rem); padding-top: 1rem; border-top: 2px solid var(--ink); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: .75rem; font-size: 1.2rem; }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.55rem; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .55rem; height: .55rem; background: var(--lime); outline: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.prose strong { color: var(--ink); }
.prose a { font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; background: var(--sheet); font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.prose blockquote { margin: .5rem 0; padding: 1rem 1.25rem; background: var(--sheet); border-left: 6px solid var(--lime); display: grid; gap: .5rem; }
.prose blockquote p:first-child { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.prose blockquote p:last-child:not(:first-child) { font-size: .95rem; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); width: 100%; }
.legal.prose { max-width: 50rem; }
.legal.prose > h2 { font-size: 1.4rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.layout aside { position: sticky; top: 6rem; display: grid; gap: 1.25rem; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } .layout aside { position: static; } }
.aside-box { background: var(--sheet); border: 2px solid var(--ink); padding: 1.1rem; display: grid; gap: .6rem; }
.aside-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.aside-box a { font-weight: 700; }

/* form */
.form { display: grid; gap: 1rem; background: var(--sheet); border: 2px solid var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: .35rem; font-weight: 700; font-size: .95rem; }
.form input, .form textarea, .form select { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-bottom: 2px solid var(--ink); padding: .7rem .75rem; border-radius: 2px; width: 100%; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--lime); outline-offset: 0; }
.form textarea { min-height: 8rem; resize: vertical; }
.form .note { font-size: .85rem; color: var(--muted); }
.form .check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 400; }
.form .check input { width: auto; margin-top: .3rem; }
.form-status { font-weight: 700; }
.form-status.ok { color: var(--ok); }
.hp { position: absolute; left: -5000px; }

/* breadcrumb */
.crumbs { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .05em; color: var(--muted); padding-top: 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.crumbs a { text-decoration: none; }

/* CTA band + footer */
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.cta-band .contact-lines { display: grid; gap: .6rem; font-family: var(--f-mono); }
.cta-band .contact-lines a { font-size: 1.15rem; text-decoration: none; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }
.site-footer { background: var(--deep); color: var(--on-deep); background-image: none; padding-block: 3rem 2rem; font-size: .93rem; border-top: 2pt solid var(--lime-dark-bg); } /* 30/10/2026: PG - footer line 2pt */
.site-footer .fgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h3 { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--lime-text-dark); margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer a { color: var(--on-deep); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--on-deep); }
.site-footer .legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); color: color-mix(in srgb, var(--on-deep) 65%, transparent); font-size: .82rem; display: grid; gap: .3rem; }
.site-footer .logo { color: var(--on-deep); }
/* 30/10/2026: PG - Bottom row uses the same columns as the footer grid: copyright under the first four, policies (vertical) under Company */
.site-footer .legal { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; column-gap: 2rem; align-items: start; }
.site-footer .legal-text { grid-column: 1 / 5; display: grid; gap: 1.2em; } /* 30/10/2026: PG - a line space between the company line and the address */
.site-footer .legal-nav { grid-column: 5; }
.site-footer .legal-nav ul { display: grid; gap: .35rem; font-size: .82rem; }
.site-footer .legal-nav a { color: color-mix(in srgb, var(--on-deep) 65%, transparent); }
.site-footer .legal-nav a:hover { color: var(--on-deep); }
@media (max-width: 960px) { .site-footer .legal { grid-template-columns: 1fr 1fr; row-gap: 1rem; } .site-footer .legal-text { grid-column: 1 / -1; } .site-footer .legal-nav { grid-column: 1 / -1; } }
@media (max-width: 960px) { .site-footer .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .site-footer .fgrid { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* 07/10/2026: PG - Logos and headshots. Logos sit on white tiles so they read in light and dark themes. */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
/* 07/10/2026: PG - Fixed tile height so square logos can't stretch a row */
.logo-tile { background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; height: 110px; padding: .9rem 1rem; text-decoration: none; min-width: 0; overflow: hidden; }
a.logo-tile:hover { border-color: var(--ink); }
.logo-tile img { display: block; max-width: 88%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.int-grid figure { margin: 0; display: grid; gap: .45rem; }
.int-grid .logo-tile { height: 96px; }
.int-grid .logo-tile img { max-height: 60px; }
.int-grid figcaption { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; color: var(--muted); text-align: center; }
.card .card-logo { background: #fff; height: 64px; display: grid; place-items: center start; padding: .4rem 0; }
/* 07/10/2026: PG - Dark mode only: inset the white logo strip so it does not touch the card text */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card .card-logo { padding: .4rem .7rem; } }
:root[data-theme="dark"] .card .card-logo { padding: .4rem .7rem; }
.card .card-logo img { max-height: 52px; max-width: 70%; width: auto; height: auto; object-fit: contain; }
.tb-logo { background: #fff; border-bottom: 2px solid var(--ink); padding: .9rem 1rem; display: grid; place-items: center start; }
.tb-logo img { max-height: 64px; max-width: 70%; width: auto; height: auto; }
.quote.has-photo { grid-template-columns: 72px minmax(0, 1fr); column-gap: 1rem; }
.quote.has-photo > blockquote { grid-column: 1 / -1; }
.quote.has-photo > img, .prose blockquote img.headshot { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; filter: grayscale(1); border: 2px solid var(--lime); }
.quote.has-photo > figcaption { align-self: center; }
.prose blockquote.has-photo { grid-template-columns: 72px minmax(0, 1fr); column-gap: 1rem; }
.prose blockquote.has-photo > p:first-of-type { grid-column: 1 / -1; }
.prose blockquote.has-photo > img.headshot { grid-row: 2; }
.prose blockquote.has-photo > p:last-of-type { align-self: center; }

/* ---------- 30/10/2026: PG - Banner images from the old site ----------
   Home: full spectrum. Software: blue. Services: ocean. Solutions, industries and case studies: teal.
   Pricing: amber. Everything else: violet. A dark gradient keeps the heading readable over the bright band. */
.b-spectrum { --banner: url("img/banner-spectrum.webp?v=4"); }
.b-blue { --banner: url("img/banner-blue.webp?v=3"); }
.b-amber { --banner: url("img/banner-amber.webp?v=3"); }
.b-teal { --banner: url("img/banner-teal.webp?v=3"); }
.b-ocean { --banner: url("img/banner-ocean.webp?v=3"); }
.b-violet { --banner: url("img/banner-violet.webp?v=3"); }
.hero { color: #fff; background-color: #05080c; background-image: linear-gradient(90deg, rgba(4, 8, 12, .7) 0%, rgba(4, 8, 12, .36) 55%, rgba(4, 8, 12, 0) 100%), var(--banner); background-size: cover; background-position: center; }
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero h1 em { background: none; color: var(--lime-dark-bg); }
.hero p, .hero li, .hero .lede, .hero .sec-head p { color: rgba(255, 255, 255, .84); }
.hero .label { color: rgba(255, 255, 255, .72); }
.hero .label b { color: var(--lime-dark-bg); }
.hero a:not(.btn) { color: #fff; }
.hero .phone-line { color: rgba(255, 255, 255, .72); }
.hero .btn { background: var(--lime-dark-bg); border-color: var(--lime-dark-bg); color: #05080c; }
.hero .btn:hover { background: #fff; border-color: #fff; color: #14212d; }
.hero .btn.ghost { background: transparent; border-color: #fff; color: #fff; }
.hero .btn.ghost:hover { background: #fff; color: #14212d; }
.hero .crumbs { padding-top: 0; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); color: rgba(255, 255, 255, .72); }
.hero .crumbs li + li::before { color: rgba(255, 255, 255, .4); }
.hero .steps li::before, .hero .steps h3 { color: #fff; }
/* white panels inside a banner keep the normal page colours */
.hero .titleblock, .hero .form { color: var(--ink); }
.hero .titleblock p, .hero .titleblock li, .hero .form p { color: var(--muted); }
.hero .titleblock a:not(.btn), .hero .form a:not(.btn) { color: var(--ink); }
.hero .form .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hero .form .btn:hover { background: var(--lime); border-color: var(--lime); color: #05080c; }
.hero-after { padding-top: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 860px) { .hero { background-image: linear-gradient(rgba(4, 8, 12, .66), rgba(4, 8, 12, .66)), var(--banner); } }
/* 30/10/2026: PG - keep the small text after a big figure (e.g. £35) on tight lines when it wraps */
.titleblock dd.big small { display: inline-block; line-height: 1.35; }
/* 30/10/2026: PG - "rev." in fact panel headings stays lower case (rest of the heading is upper case) */
.titleblock .tb-head .rev { text-transform: none; }
/* 30/10/2026: PG - "Contact" in the header: same as the other menu items, in green (dark lime for contrast on white) */
.nav > a.nav-contact { color: var(--lime-ink); }
.nav > a.nav-contact:hover { color: var(--ink); }
/* 30/10/2026: PG - the dropdown arrows add width after Software/Services/Solutions, so give a link that follows a plain link the same visible gap */
@media (min-width: 1081px) { .nav > a + a { margin-left: .25rem; } }
/* 30/10/2026: PG - result figure and bold "what changed" line inside case study cards */
.card .fig { font-size: 2rem; line-height: 1; letter-spacing: -.02em; margin-top: .35rem; }
.card p.what { color: var(--ink); margin-top: -.2rem; }
/* 30/10/2026: PG - result block sits underneath the card text, aligned to the bottom so results line up across a row */
.card:has(.result) { display: flex; flex-direction: column; }
.card .result { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .35rem; }
.card .result .fig { margin-top: 0; }
/* 30/10/2026: PG - featured customer logo under a sector heading (home page) */
.sector-logo { display: flex; align-items: center; justify-content: center; height: 64px; padding: .5rem .75rem; background: #fff; border: 1px solid var(--line); margin-top: .6rem; }
/* 30/10/2026: PG - logo sits at the bottom of its sector box, aligned across the row */
.item:has(> .sector-logo) { display: flex; flex-direction: column; gap: .5rem; }
/* 30/10/2026: PG - "CRM for …" links pushed down so they line up across the row, logo straight underneath */
.item:has(> .sector-logo) > a.more { margin-top: auto; margin-bottom: .1rem; }
.item > .sector-logo { margin-top: .6rem; }
.sector-logo img { max-height: 44px; max-width: 70%; width: auto; height: auto; object-fit: contain; }
a.sector-logo:hover { border-color: var(--lime); }
/* 30/10/2026: PG - white section background */
section.white { background: var(--sheet); }
/* 30/10/2026: PG - extra space between the headline and the buttons when a banner has no intro paragraph (home page) */
.hero h1 + .ctas { margin-top: clamp(3.75rem, 7.5vw, 5.625rem); }
/* 30/10/2026: PG - featured customer logos in a row under the sector section intro, one per column */
.sector-logos { margin-bottom: 1.75rem; }
.sector-logos .sector-logo { margin-top: 0; }
@media (max-width: 900px) { .sector-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .sector-logos .sector-logo { height: 56px; padding: .4rem; } }
/* 30/10/2026: PG - keep the "CRM for …" links lined up across the sector row */
.sector-logos + .grid > .item { display: flex; flex-direction: column; gap: .5rem; }
.sector-logos + .grid > .item > a.more { margin-top: auto; }
/* 30/10/2026: PG - fact sheet top lines up with the top of the headline letters (below the small label line), desktop only */
@media (min-width: 861px) {
  .hero-grid:has(> div > .label:not(:empty)) > .titleblock { margin-top: calc(var(--s-1) * 1.6 + .9rem + var(--s4) * .13); }
}
/* 30/10/2026: PG - product screenshot under a section heading */
.screenshot { margin: 1.5rem 0 0; }
.screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 45px rgba(20, 33, 45, .32), 0 4px 12px rgba(20, 33, 45, .18); } /* 30/10/2026: PG - stronger shadow */
/* 02/11/2026: PG - breadcrumb sits half as far below the header; the space moves underneath it so the heading stays where it was */
.hero:has(> .crumbs:first-child) { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.hero > .crumbs:first-child { margin-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) + clamp(1.25rem, 3vw, 2.5rem)); }
/* 02/11/2026: PG - inner banners without a label: heading starts at the top, fact panel lines up with the heading letters */
.hero-grid > div > h1:first-child { margin-top: 0 !important; }
@media (min-width: 861px) { .hero-grid:has(> div > h1:first-child) > .titleblock { margin-top: calc(var(--s4) * .13); } }
/* 02/11/2026: PG - menu headings are links to their section page; the arrow still opens the dropdown */
.nav summary > a { color: inherit; text-decoration: none; }
.nav summary > a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.nav summary > a[aria-current="page"] { box-shadow: none; }
.site-footer h3 a { color: inherit; text-decoration: none; }
.site-footer h3 a:hover { text-decoration: underline; }

/* 03/11/2026: PG - Header "Contact Us" button: black with white text, #4ba822 on hover (was #bada55; text turns black so it stays readable on the light green) */
.nav > a.nav-contact { background: #000; color: #fff; border: 2px solid #000; padding: .5rem 1rem; margin-left: .5rem; }
.nav > a.nav-contact:hover, .nav > a.nav-contact:focus-visible { background: #4ba822; border-color: #4ba822; color: #000; }
.nav > a.nav-contact[aria-current="page"] { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav > a.nav-contact { border-color: #fff; } }
@media (max-width: 1080px) { .nav > a.nav-contact { margin: .5rem 0 0; text-align: center; } }

/* 03/11/2026: PG - Banner image sits higher: its brightest band (56.4% down the image) now lands 33% from the top of the banner.
   The image is scaled to the banner width (height = 62.5% of width), so the offset is 33% of the free space minus 14.625% of the banner width.
   The image's top and bottom are black, so any uncovered strip blends into the banner's black background. */
.hero { background-color: #000; container-type: inline-size; background-size: 100% 100%, 100% auto; background-repeat: no-repeat; background-position: 0 0, center calc(33% - 14.625cqw); }

/* 03/11/2026: PG - Customer validation box (Norbar) pinned to the bottom left of the theCRM section */
.split > .sw-left { align-self: stretch; display: flex; flex-direction: column; }
.proof-box { margin: auto 0 0; padding-top: 2rem; max-width: 26rem; }
.proof-box > * { margin: 0; }
.proof-box { border: 0; }
.proof-box .proof-logo { display: inline-block; background: #fff; padding: .5rem .75rem; border: 1px solid var(--line); margin-bottom: .9rem; }
.proof-box .proof-logo img { display: block; height: 40px; width: auto; }
.proof-box blockquote { border-left: 4px solid var(--lime); padding-left: 1rem; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.proof-box figcaption { padding-left: calc(1rem + 4px); margin-top: .5rem; color: var(--muted); font-size: .9rem; }
.proof-box .proof-link { padding-left: calc(1rem + 4px); margin-top: .6rem; font-weight: 700; }
/* 03/11/2026: PG - validation box as a compact bordered card: logo on the left, quote and link on the right */
.proof-box { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; margin-top: auto; padding: 1rem 1.1rem; max-width: 30rem; background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--lime); }
.split > .sw-left > .screenshot { margin-bottom: 2rem; }
.proof-box .proof-logo { grid-row: 1 / span 3; margin: 0; padding: .35rem .5rem; }
.proof-box .proof-logo img { height: 34px; }
.proof-box blockquote { border: 0; padding: 0; font-size: 1rem; color: var(--ink); }
.proof-box blockquote p { color: var(--ink); }
.proof-box figcaption, .proof-box .proof-link { padding-left: 0; font-size: .85rem; }
.proof-box .proof-link { margin-top: .4rem; }
@media (max-width: 480px) { .proof-box { grid-template-columns: 1fr; } .proof-box .proof-logo { grid-row: auto; justify-self: start; margin-bottom: .6rem; } }
/* 03/11/2026: PG - Norbar logo in the validation box made larger */
.proof-box .proof-logo img { height: 60px; }
/* 03/11/2026: PG - validation box stripe in the darker green used for the "CRM Software" label */
.proof-box { border-left-color: var(--lime-ink); }

/* 03/11/2026: PG - Solutions logos with a validation point under each, dark green stripe on the left like the Norbar box */
.sector-proof { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--lime-ink); }
.sector-proof > .sector-logo { margin: 0; border: 0; border-bottom: 1px solid var(--line); }
.sector-proof > p { margin: 0; padding: .7rem .8rem .8rem; font-weight: 700; font-size: .95rem; line-height: 1.35; color: var(--ink); }
@media (max-width: 900px) { .sector-logos:has(.sector-proof) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sector-logos:has(.sector-proof) { grid-template-columns: 1fr; } }

/* 03/11/2026: PG - Home page Rockall quote in regular weight, not bold */
.quote-wide blockquote, .quote-wide blockquote p { font-weight: 400; }

/* 04/11/2026: PG - LinkedIn icon in front of the footer LinkedIn link, in the site green */
.li-link { display: inline-flex; align-items: center; gap: .5rem; }
.li-link .li-icon { flex: none; display: block; }
.li-link:hover .li-icon rect { fill: #fff; }

/* 04/11/2026: PG - Solutions validation points in regular weight; only the figure is bold */
.sector-proof > p { font-weight: 400; }
.sector-proof > p strong { font-weight: 700; }

/* 04/11/2026: PG - theCRM lead form iframe on the contact page sits in the white form panel */
.form-embed { display: block; padding: 0; overflow: hidden; }
.form-embed iframe { display: block; }
/* 04/11/2026: PG - LinkedIn icon monochrome: same colour as the link text, navy "in" */
.li-link:hover .li-icon rect { fill: currentColor; }

/* 04/11/2026: PG - Heading for screen readers only (keeps the heading order h1 > h2 > h3 without showing an extra title) */
.visually-h { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 04/11/2026: PG - Find us page: large Google map across the content width */
.map-embed { border: 1px solid var(--line); background: var(--paper); }
.map-embed iframe { display: block; width: 100%; height: clamp(300px, 40vw, 460px); border: 0; }
/* 04/11/2026: PG - map sits at the top of the Find us main column, above Our office */
.prose > .map-embed { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* 04/11/2026: PG - Screenshot zoom: magnifying-glass button; clicking shows the image 75% bigger over the page */
.zoomable { position: relative; }
.zoom-btn { position: absolute; right: .6rem; bottom: .6rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #14212d; box-shadow: 0 2px 8px rgba(20, 33, 45, .3); cursor: zoom-in; }
.zoom-btn:hover { background: #14212d; color: #fff; } /* 04/11/2026: PG - monochrome hover (was green) */
.zoomable img { cursor: zoom-in; }
.zoom-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(5, 8, 12, .78); cursor: zoom-out; }
.zoom-overlay img { display: block; width: min(var(--zw), calc(100vw - 2rem)); height: auto; max-height: calc(100vh - 2rem); object-fit: contain; border-radius: 6px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.zoom-overlay .zoom-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #fff; color: #14212d; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.zoom-overlay .zoom-close:hover { background: #14212d; color: #fff; }

/* 05/11/2026: PG - Norbar logo back in colour, and the white box/border around it removed */
.proof-box .proof-logo { background: none; border: 0; padding: 0; }

/* 05/11/2026: PG - Labels are in a fixed-width font, so spaces looked double-width; tighten the gap between words to a normal single space */
.label { word-spacing: -0.3em; }

/* 05/11/2026: PG - Underlines under linked text in #bada55 (light green) */
a, .nav summary > a:hover, .site-footer a:hover, .site-footer h3 a:hover { text-decoration-color: #bada55; }

/* 05/11/2026: PG - Green "Arrange a demo" buttons and the Contact Us hover back to #bada55 (rest of the site stays #4ba822) */
.btn.lime, .hero .btn:not(.ghost) { background: #4ba822; border-color: #4ba822; color: #05080c; } /* 05/11/2026: PG - Arrange a demo back to #4ba822 */
.nav > a.nav-contact:hover, .nav > a.nav-contact:focus-visible { background: #bada55; border-color: #bada55; color: #000; }
.btn.lime:hover, .hero .btn:not(.ghost):hover { background: #fff; border-color: #fff; color: #14212d; }

/* 05/11/2026: PG - Brightest band of the banner image now sits a fixed 200px below the top of the banner on every page
   (was 33% of each banner's height, which varied with banner height). Image is banner-width (height = 62.5% of width),
   brightest band 56.4% down it, so offset = 200px - 0.564 x 62.5cqw = 200px - 35.25cqw. */
.hero { background-position: 0 0, center calc(200px - 35.25cqw); }

/* 06/11/2026: PG - "Arrange a demo" in the Next step band at the bottom of every page is #bada55 (banner buttons stay #4ba822) */
.cta-band .btn.lime { background: #bada55; border-color: #bada55; color: #05080c; }
.cta-band .btn.lime:hover { background: #fff; border-color: #fff; color: #14212d; }

/* 06/11/2026: PG - New CRM-UK logo (theCRM lettering): black text in the header, white text in the footer and in dark mode */
.logo img.wordmark { width: auto; height: 44px; display: block; }
.site-footer .logo img.wordmark { height: 48px; }
.logo picture { display: block; }
@media (max-width: 480px) { .site-header .logo img.wordmark { height: 38px; } }
/* 06/11/2026: PG - logo a little larger so the lettering reads at the same size as the old header text */
.site-header .logo img.wordmark { height: 54px; }
.site-footer .logo img.wordmark { height: 56px; }
@media (max-width: 480px) { .site-header .logo img.wordmark { height: 44px; } }

/* 06/11/2026: PG - Quotes on content pages styled like the Norbar validation box on the home page:
   bordered panel, dark green stripe on the left, bold quote, small grey attribution, photo beside the name */
.prose blockquote { background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--lime-ink); padding: 1rem 1.1rem; max-width: 36rem; margin: 1.25rem 0; gap: .45rem; }
.prose blockquote p:first-child { font-family: var(--f-body); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.prose blockquote p:last-child:not(:first-child) { font-size: .85rem; color: var(--muted); }
.prose blockquote + blockquote { margin-top: 1rem; }
.prose blockquote img.headshot { width: 56px; height: 56px; border-width: 1px; }
.prose blockquote.has-photo { grid-template-columns: 56px minmax(0, 1fr); column-gap: .9rem; }
/* 06/11/2026: PG - Quotes on content pages carry the customer logo, laid out and sized like the Norbar validation box */
.prose blockquote.has-logo { display: grid; grid-template-columns: 146px minmax(0, 1fr); column-gap: 1rem; align-items: start; max-width: 30rem; padding: 1rem 1.1rem; }
.prose blockquote .q-logo { display: flex; align-items: center; justify-content: flex-start; height: 60px; border: 0; text-decoration: none; }
.prose blockquote .q-logo img { display: block; max-width: 146px; max-height: 60px; width: auto; height: auto; }
.prose blockquote .q-body { display: grid; gap: .4rem; }
.prose blockquote .q-body p { margin: 0; }
.prose blockquote .q-body p:first-child { font-family: var(--f-body); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.prose blockquote .q-body p:nth-child(2) { font-size: .85rem; font-weight: 400; color: var(--muted); }
.prose blockquote .q-body .proof-link { font-size: .85rem; font-weight: 700; color: inherit; }
@media (max-width: 480px) { .prose blockquote.has-logo { grid-template-columns: 1fr; } .prose blockquote .q-logo { margin-bottom: .6rem; } }
/* 06/11/2026: PG - Validation boxes all use the Norbar logo size (146 x 60 max) so wide logos don't squeeze the quote */
.proof-box { grid-template-columns: 146px minmax(0, 1fr); }
.proof-box .proof-logo img { max-width: 146px; max-height: 60px; width: auto; height: auto; }
.proof-box blockquote p { font-weight: 700; font-size: 1rem; line-height: 1.4; }
@media (max-width: 480px) { .proof-box { grid-template-columns: 1fr; } }
/* 06/11/2026: PG - theCRM is never shown as THECRM in capitalised labels and fact boxes */
.nc { text-transform: none; letter-spacing: inherit; }
/* 06/11/2026: PG - Case study cards line up row by row, so the line above each result is level across the cards */
@supports (grid-template-rows: subgrid) {
  .cards:has(.result) { row-gap: 0; }
  .cards:has(.result) > .card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: .5rem; align-content: stretch; margin-bottom: 1.25rem; }
  .cards:has(.result) > .card .result { margin-top: 0; align-self: start; }
}
/* 06/11/2026: PG - Solutions testimonials: Rockall across the top, Neville Lumb and Tornado side by side with their tops level */
.grid.testi { align-items: start; }
.grid.testi > .quote { grid-column: 1 / -1; }
.grid.testi > .proof-box { margin-top: 0; }
/* 06/11/2026: PG - Solutions testimonials: Rockall quote in normal weight */
.grid.testi > .quote blockquote { font-weight: 400; }
/* 06/11/2026: PG - Results strip: customer name sits on the bottom line of every cell, level across the strip */
.proof > div { display: flex; flex-direction: column; }
.proof .who { margin-top: auto; padding-top: .35rem; }
/* 06/11/2026: PG - Side-by-side validation boxes are the same height (tops and bottoms level) */
.grid.testi { align-items: stretch; }
.grid.testi > .proof-box { align-content: start; }
/* 06/11/2026: PG - Validation boxes inside a content page column: no quote panel styling, logo above the text */
.prose .proof-box blockquote { background: none; border: 0; padding: 0; margin: 0; max-width: none; display: block; }
.prose .proof-box blockquote p { font-family: var(--f-body); }
.prose .testi { margin: 1rem 0 1.5rem; }
.prose .testi > .proof-box { grid-template-columns: 1fr; max-width: none; }
.prose .testi > .proof-box .proof-logo { grid-row: auto; justify-self: start; margin-bottom: .6rem; }
.prose .proof-box .proof-link a { text-decoration-color: var(--link-ul, #bada55); }
@media (max-width: 600px) { .prose .testi { grid-template-columns: 1fr; } }
/* 06/11/2026: PG - Price card: the three "No …" points form the bottom row across the full width of the card */
.price-card > .pc-row { grid-column: 1 / -1; border-top: 2px solid var(--ink); gap: 1.5rem; }
@media (max-width: 760px) { .price-card > .pc-row { grid-template-columns: 1fr; } }
/* 06/11/2026: PG - Price card bottom row: no lines above the three points */
.price-card > .pc-row > .item { border-top: 0; padding-top: 0; }
/* 06/11/2026: PG - Pricing: half the space between the price card and "Your set-up project" */
section:has(.price-card) { padding-bottom: 36px; }
section:has(.price-card) + section { padding-top: 36px; }
/* 06/11/2026: PG - Pricing set-up list starts level with the paragraph beside it */
.split .ticks:first-child, .split > div > .ticks { margin-top: 0; }
/* 06/11/2026: PG - "See the case study" cue on Solutions cards, styled like the proof-box link */
.card .card-more { font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: underline; text-decoration-color: #bada55; text-decoration-thickness: 2px; text-underline-offset: 4px; align-self: start; }
.card:hover .card-more { text-decoration-color: var(--lime); }
/* 06/11/2026: PG - Card "See the case study" sits inline at the end of the summary */
.card p .card-more { display: inline; white-space: nowrap; font-size: inherit; }
/* 09/11/2026: PG - Top nav dropdown triangles twice the size */
.nav summary::after { font-size: 1.68em; line-height: 0; vertical-align: -.1em; }
/* 09/11/2026: PG - Top nav triangles drawn in CSS so their top lines up with the top of the lower-case letters (x-height) */
.nav summary::after { content: ""; display: inline-block; width: 0; height: 0; border-left: .36em solid transparent; border-right: .36em solid transparent; border-top: .6em solid var(--muted); margin-left: .4em; font-size: 1em; line-height: normal; vertical-align: calc(1ex - .6em); }
/* 09/11/2026: PG - Green line along the top of the nav drop-down menus is #bada55 */
.nav .menu { border-top-color: #bada55; }
/* 09/11/2026: PG - Sales and Support phone and email lines use the main website font, not the monospace font */
.cta-band .contact-lines, .cta-band .contact-lines .label, .phone-line, .titleblock dl dt { font-family: var(--f-body); }
/* 09/11/2026: PG - Map taller so London and Manchester both fit at zoom 7, including on phones */
.map-embed iframe { height: clamp(480px, 50vw, 560px); }
/* 09/11/2026: PG - Top nav triangles sized to the x-height: top level with the top of the short letters, bottom on the baseline */
.nav summary::after { border-left-width: .6ex; border-right-width: .6ex; border-top-width: 1ex; vertical-align: baseline; }
/* 09/11/2026: PG - Demo banner "Arrange a demo" button white, hover #bada55 */
.cta-band .btn.lime { background: #fff; border-color: #fff; color: #14212d; }
.cta-band .btn.lime:hover { background: #bada55; border-color: #bada55; color: #05080c; }
/* 09/11/2026: PG - Header banner "Arrange a demo" button white, hover #bada55 (matches the demo banner) */
.hero .btn:not(.ghost) { background: #fff; border-color: #fff; color: #14212d; }
.hero .btn:not(.ghost):hover { background: #bada55; border-color: #bada55; color: #05080c; }
/* 09/11/2026: PG - Name and role under a Solutions card quote */
.card .result .card-who { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }
/* 09/11/2026: PG - Solutions card quotes (Vexcolt, Norbar, Autotrak) italic, not bold */
.card .result p.what.card-quote, .card .result p.what.card-quote i { font-weight: 400; font-style: italic; }
/* 09/11/2026: PG - "See pricing" button on dark banners hovers the same as "Arrange a demo" (#bada55, dark text) */
.hero .btn.ghost:hover, .cta-band .btn.ghost:hover { background: #bada55; border-color: #bada55; color: #05080c; }
/* 09/11/2026: PG - All square bullet points #bada55 */
.ticks li::before, .prose ul > li::before, .dark .ticks li::before, .hero .ticks li::before { background: #bada55; }
/* 09/11/2026: PG - Selected (current section) line under the top nav item is #bada55 */
.nav > a[aria-current="page"]:not(.nav-contact), .nav summary.current { box-shadow: inset 0 -3px 0 #bada55; } /* 09/11/2026: PG - only the bracket under the menu item, no second line under the link text */
/* 09/11/2026: PG - Green line removed from the top of the drop-down (level 2) menus; plain border like the other sides */
.nav .menu { border-top: 1px solid var(--line); }
/* 09/11/2026: PG - Drop-down (level 2) menu items: text turns #bada55 on hover */
.nav .menu a:hover { color: #bada55; }
/* 09/11/2026: PG - Selected nav section: no line (bracket) underneath; its down arrow is #bada55 instead */
.nav > a[aria-current="page"]:not(.nav-contact), .nav summary.current { box-shadow: none; }
.nav summary.current::after { border-top-color: #bada55; }
/* 09/11/2026: PG - Selected drop-down (level 2) item: no underline or shading, just #bada55 text */
.nav .menu a[aria-current="page"] { box-shadow: none; background: transparent; color: #bada55; }
/* 09/11/2026: PG - Top nav "Pricing" (plain link) hover: #bada55 underline like the other items, text colour unchanged */
.nav > a:not(.nav-contact):hover { color: var(--ink); text-decoration: underline; text-decoration-color: #bada55; }
/* 09/11/2026: PG - Demo banner phone numbers and emails turn #bada55 when hovered, focused or clicked */
.cta-band .contact-lines a:hover, .cta-band .contact-lines a:focus-visible, .cta-band .contact-lines a:active { color: #bada55; }
/* 09/11/2026: PG - "See the case study": no underline; a single-point #bada55 underline on hover, keyboard focus or click */
.card .card-more, .proof-link a, .prose .proof-box .proof-link a { text-decoration: none; }
.card:hover .card-more, .card:focus-visible .card-more, .card:active .card-more,
.proof-link a:hover, .proof-link a:focus-visible, .proof-link a:active, .prose .proof-box .proof-link a:hover, .prose .proof-box .proof-link a:focus-visible { text-decoration: underline; text-decoration-color: #bada55; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* 10/11/2026: PG - Banner (H1) content moved down 10px on every page; banner height unchanged */
.hero { padding-top: max(6px, calc(var(--hero-pt, clamp(2.5rem, 6vw, 5rem)) - 20px)); padding-bottom: calc(clamp(2rem, 5vw, 4rem) + 20px); } /* 10/11/2026: PG - banner content net 20px higher than originally */
.hero:has(> .crumbs:first-child) { padding-top: max(6px, calc(clamp(1.25rem, 3vw, 2.5rem) - 20px)); }
/* 10/11/2026: PG - Home banner lines up with the other pages: top line (label) level with their breadcrumb, H1 level with their H1 */
.hero:not(:has(.crumbs)) { padding-top: max(6px, calc(clamp(1.25rem, 3vw, 2.5rem) - 20px)); }
.hero:not(:has(.crumbs)) h1 { margin-top: 0; }
.hero:not(:has(.crumbs)) .label:has(+ h1) { margin-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) + clamp(1.25rem, 3vw, 2.5rem) - 1px); }
/* 10/11/2026: PG - "Or any: API, MCP or Database" text tile at the end of the integration logos */
.int-grid .int-any { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-align: center; padding: .5rem; line-height: 1.3; }
.int-grid .int-any span { font-size: .85rem; color: var(--muted); }
.int-grid .int-any b { font-size: .95rem; color: var(--ink); }
/* 10/11/2026: PG - All link underlines are a single pixel, like the top nav */
a, .card .card-more, .nav summary > a:hover { text-decoration-thickness: 1px; }
/* 10/11/2026: PG - "Or any" tile shows a link icon; its wording sits underneath like the other captions */
.int-grid .int-any { display: grid; place-items: center; color: var(--ink); }
/* 10/11/2026: PG - Phone line sits in the lower left-hand corner of every banner */
.hero .hero-phone .phone-line { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
/* 10/11/2026: PG - Fact sheet values that should not be bold */
.titleblock dd .nb { font-weight: 400; }
/* 10/11/2026: PG - Headings for screen readers and search engines that are not shown on screen */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 10/11/2026: PG - Selected top nav item keeps a single-pixel #bada55 underline (same as the hover underline) */
.nav summary.current > a, .nav > a[aria-current="page"]:not(.nav-contact) { text-decoration: underline; text-decoration-color: #bada55; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nav summary.current:not(:has(> a)) { text-decoration: underline; text-decoration-color: #bada55; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* 10/11/2026: PG - Home banner: fact sheet top lines up with the top of "UK based" in the H1 (whatever the label above wraps to) */
@media (min-width: 861px) {
  .hero:not(:has(.crumbs)) .hero-grid { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .hero:not(:has(.crumbs)) .hero-grid > div { display: contents; }
  .hero:not(:has(.crumbs)) .hero-grid > div > * { grid-column: 1; }
  .hero:not(:has(.crumbs)) .hero-grid > div > .label { grid-row: 1; }
  .hero:not(:has(.crumbs)) .hero-grid > div > h1 { grid-row: 2; }
  .hero:not(:has(.crumbs)) .hero-grid > div > .ctas { grid-row: 3; }
  .hero:not(:has(.crumbs)) .hero-grid > .titleblock { grid-column: 2; grid-row: 2 / span 2; margin-top: calc(.9rem + var(--s4) * .12) !important; }
}

/* 10/11/2026: PG - Software banner H1: each requested line stays on one line on desktop (phones wrap as needed) */
@media (min-width: 861px) { .hero h1 .nw { white-space: nowrap; } }

/* 11/11/2026: PG - Email and phone links in fact sheets: 1px #bada55 underline */
.titleblock dd a[href^="mailto:"], .titleblock dd a[href^="tel:"] { text-decoration: underline; text-decoration-color: #bada55; text-decoration-thickness: 1px; text-underline-offset: 3px; }