:root {
  color-scheme: light dark;
  /* Palette follows digitaltactics.co.uk: navy #19283b, orange #f07318, white, soft green tint. */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ebf3ee;
  --tint: #edf1ee;
  --ink: #19283b;
  --ink-2: #44546a;
  --ink-3: #78879a;
  --rule: #d8e0e4;
  --accent: #f07318;
  --accent-ink: #ffffff;
  --ok: #1f7a4d;
  --err: #b03424;
  --radius: 10px;
  --pill: 40px;
  --wrap: 68rem;
  --navy: #19283b;
  --on-navy: #ffffff;
  --on-navy-2: #b9c6d4;
  --navy-rule: #2d4157;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121c29;
    --surface: #19283b;
    --surface-2: #223448;
    --tint: #1a2838;
    --ink: #eef3f7;
    --ink-2: #b9c6d4;
    --ink-3: #8797a8;
    --rule: #2d4157;
    --accent: #f7903f;
    --accent-ink: #19283b;
    --ok: #63c295;
    --err: #ef8d7c;
    --navy: #0f1926;
    --navy-rule: #2d4157;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* The footer sits at the bottom of the window even when a page is short (success, cancelled). */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 640; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.06rem; }
p { margin: 0 0 1em; color: var(--ink-2); }
a { color: inherit; }
small { color: var(--ink-3); }

header.site { border-bottom: 1px solid var(--navy-rule); background: var(--navy); color: var(--on-navy);
              position: sticky; top: 0; z-index: 10; }
header.site .brand { color: var(--on-navy); }
header.site nav a { color: var(--on-navy-2); }
header.site nav a:hover { color: var(--on-navy); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 14px; }
.brand { font-weight: 680; letter-spacing: -0.02em; text-decoration: none; font-size: 1.05rem; }
.brand span { color: var(--accent); }
nav a { margin-left: 1.25rem; text-decoration: none; color: var(--ink-2); font-size: .94rem; }
nav a:hover { color: var(--ink); }

/* Full-bleed navy band; .hero itself is width-constrained by .wrap, so the colour goes here. */
.hero-band { background: var(--navy); color: var(--on-navy); }
.hero-band p.lede-sub { font-size: .98rem; max-width: 60ch; color: var(--on-navy-2); opacity: .9; }
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.6rem, 6vw, 4.5rem); }
/* Two columns from 900px; one column, image last, below that. The image is decoration, so it goes
   after the text in the source order so a screen reader and a narrow viewport both get the point
   before the picture. */
.hero-split { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.hero-figure picture, .hero-figure img { display: block; width: 100%; height: auto; }
.hero-figure img {
  border-radius: 20px; aspect-ratio: 1 / 1; object-fit: cover;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
@media (min-width: 900px) {
  .hero-split { grid-template-columns: 1fr 0.85fr; }
  .hero-text .lede, .hero-text .lede-sub { max-width: 46ch; }
}
@media (max-width: 899px) {
  .hero-figure { margin-top: .4rem; }
  /* A square crop is tall on a phone; take a letterbox slice through the face instead. */
  .hero-figure img { aspect-ratio: 16 / 9; object-position: 38% center; }
}
.hero-band h1 { color: var(--on-navy); }
.hero-band p, .hero-band p.lede { color: var(--on-navy-2); }
.hero p.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 46ch; }
.hero-band .eyebrow { color: var(--accent); background: transparent; border-color: var(--navy-rule); }
.hero-band .btn.secondary { color: var(--on-navy); border-color: var(--navy-rule); }
.hero-band .btn.secondary:hover { background: rgba(255,255,255,.12); color: var(--on-navy);
                                 border-color: var(--on-navy-2); }
.eyebrow {
  display: inline-block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .7rem; margin-bottom: 1.4rem; background: var(--surface);
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; align-items: center; }
.btn {
  display: inline-block; background: var(--accent); color: #000;
  text-decoration: none; font-weight: 700; padding: .78rem 1.6rem; border-radius: var(--pill);
  border: 0; cursor: pointer; font-size: 1rem; font-family: inherit;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--rule);
                 border-radius: var(--pill); }
.btn.secondary:hover { background: var(--navy); color: var(--on-navy); border-color: var(--navy); filter: none; }
.btn[disabled] { opacity: .55; cursor: progress; }

section { padding-block: clamp(3rem, 7vw, 5rem); border-top: 0; }
section:nth-of-type(even) { background: var(--tint); }
/* One navy band mid-page, so the brand colour carries through rather than only topping and tailing. */
section.band-navy { background: var(--navy); color: var(--on-navy); }
section.band-navy h2, section.band-navy h3 { color: var(--on-navy); }
section.band-navy p, section.band-navy li { color: var(--on-navy-2); }
section.band-navy .card { background: rgba(255,255,255,.05); border-color: var(--navy-rule); }
section.band-navy .card .n { color: var(--accent); }
/* Keep white either side of the navy band, so it reads as one emphasis and not as a slab
   of three coloured sections running together. */
section.band-navy + section, section:has(+ .band-navy) { background: var(--surface); }
section.band-navy + section .card { border-color: var(--surface-2); }
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--surface-2); border-radius: 20px;
        padding: 1.5rem 1.4rem; }
section:nth-of-type(even) .card { border-color: #dfe8e2; }
.card p { margin-bottom: 0; font-size: .95rem; }
.card .n { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; display: block; margin-bottom: .4rem; }

.price-box { background: var(--surface); border: 1px solid var(--surface-2); border-radius: 20px; padding: 1.6rem; max-width: 30rem; }
.price { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 680; letter-spacing: -.03em; color: var(--ink); }
.price small { font-size: .95rem; font-weight: 400; display: block; margin-top: .2rem; }
ul.ticks { list-style: none; padding: 0; margin: 1rem 0 0; }
ul.ticks li { padding-left: 1.5rem; position: relative; margin-bottom: .5rem; color: var(--ink-2); font-size: .95rem; }
ul.ticks li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

form { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; max-width: 42rem; }
.field { margin-bottom: 1.1rem; }
label, .label { display: block; font-weight: 580; margin-bottom: .35rem; font-size: .93rem; }
label .opt, .label .opt { font-weight: 400; color: var(--ink-3); }
input, textarea, select {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 8px; padding: .65rem .75rem;
}
textarea { min-height: 8.5rem; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.hint { font-size: .85rem; color: var(--ink-3); margin: .3rem 0 0; }
.err { color: var(--err); font-size: .87rem; margin: .3rem 0 0; min-height: 0; }
.notice { border-radius: 8px; padding: .8rem 1rem; font-size: .93rem; margin-bottom: 1rem; }
.notice.bad { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); }

details { border-top: 1px solid var(--rule); padding: 1rem 0; }
details summary { cursor: pointer; font-weight: 580; }
details p { margin: .7rem 0 0; font-size: .95rem; }

footer.site { border-top: 0; padding-block: 2.8rem; background: var(--navy); color: var(--on-navy-2); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
footer.site a { color: var(--on-navy-2); text-decoration: none; margin-right: 1.1rem; font-size: .9rem; }
/* The spacing and size above are for the footer's link row; a link inside a sentence needs
   neither, or the gap lands between the word and the comma after it. */
footer.site small a { margin-right: 0; font-size: inherit; text-decoration: underline;
                      text-underline-offset: 2px; }
footer.site a:hover { color: var(--accent); }

.centre { min-height: 68vh; display: grid; place-items: center; text-align: center; }
.centre .inner { max-width: 34rem; }

.tier { display: flex; flex-direction: column; gap: .6rem; }
.tier .price { font-size: 1.8rem; font-weight: 680; letter-spacing: -.03em; }
.tier p { flex: 1; }
.tier.unavailable { opacity: .6; }
.tier .btn { align-self: flex-start; }

.bespoke-card {
  margin-top: 1.6rem; background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.6rem; display: flex; flex-wrap: wrap;
  gap: 1.5rem; justify-content: space-between; align-items: flex-start;
}
.bespoke-card > div:first-child { flex: 1 1 22rem; }
.bespoke-price { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }

/* Two by two once there is room for it; one column on a phone. */
.tier-choices { display: grid; gap: .5rem; }
@media (min-width: 620px) { .tier-choices { grid-template-columns: 1fr 1fr; } }
.tier-choice {
  display: flex; align-items: flex-start; gap: .6rem; font-weight: 400;
  border: 1px solid var(--rule); border-radius: 8px; padding: .7rem .8rem; cursor: pointer;
  background: var(--bg);
}
.tier-choice input { margin-top: .22rem; }        /* sits with the first line, not the block */
.tier-choice-body { display: block; }
.tier-choice-head { display: block; }
.tier-choice small { display: block; margin-top: .15rem; color: var(--ink-3); line-height: 1.45; }
.tier-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.tier-choice input { width: auto; }
.notice.ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}

.file-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.file-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 6px;
  padding: .45rem .7rem; font-size: .9rem;
}
.file-list small { color: var(--ink-3); margin-left: .4rem; }
.link-btn {
  background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit;
  font-size: .85rem; padding: 0; text-decoration: underline;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-align: center; padding: 1.6rem 1rem; margin-top: .4rem; cursor: pointer;
  background: var(--surface-2); border: 2px dashed var(--ink-3); border-radius: 12px;
  transition: border-color .15s, background-color .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.dropzone:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.dropzone-main { font-weight: 600; }
.dropzone-main u { color: var(--accent); }
.dropzone-sub { font-size: .85rem; color: var(--ink-3); }
.drop-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .drop-desktop { display: none; }
  .drop-touch { display: inline; }
}

/* ---- multipage navigation and per-page closing calls to action ---- */
header.site nav a[aria-current="page"] { color: var(--on-navy); position: relative; }
header.site nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent);
}
header.site nav a.nav-cta {
  background: var(--accent); color: #000; font-weight: 700;
  padding: .42rem 1rem; border-radius: var(--pill); margin-left: 1.25rem;
}
header.site nav a.nav-cta:hover { color: #000; filter: brightness(1.08); }
header.site nav a.nav-cta[aria-current="page"]::after { display: none; }

.nav-toggle {
  display: none; background: var(--accent); color: #000; border: 0; font: inherit; font-weight: 700;
  padding: .4rem .9rem; border-radius: var(--pill); cursor: pointer;
}

/* The closing call to action: every page ends either in a form or in one of these. */
/* The closing call to action is the same object the frameworks and assess-refresh pages close
   with: one bordered card spanning the section, text on the left, buttons on the right. */
section.cta-end .bespoke-card { margin-top: 0; width: 100%; }
section.cta-end .cta-text { flex: 1 1 26rem; }
section.cta-end h2 { margin-bottom: .35rem; }
section.cta-end p { margin-bottom: 0; max-width: 58ch; }
section.cta-end .cta-row { flex: 0 0 auto; margin-top: 0; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  header.site nav {
    display: none; flex-basis: 100%; padding-block: .6rem 1rem;
  }
  header.site nav.open { display: block; }
  header.site nav a { display: block; margin: 0 0 .1rem; padding: .55rem 0; }
  header.site nav a.nav-cta { display: inline-block; margin: .5rem 0 0; }
  header.site .wrap { flex-wrap: wrap; }
}

/* External links: coloured, underlined, and marked with an arrow so a new tab is not a surprise. */
a.ext { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a.ext::after { content: "\2197"; font-size: .85em; margin-left: .15em; }
.hero-band a.ext, section.band-navy a.ext { color: var(--accent); }

/* ---- media-type cards with a coloured icon ---- */
/* One hue per card, set on the card and used for both the glyph and its tinted plate, so a new
   card needs one colour rather than two rules. The hues are chosen to sit beside the orange
   accent without competing with it, and each is legible on white and on the dark surface. */
/* Icon and heading share a row; the icon never shrinks and the heading wraps under itself
   rather than under the icon. */
.card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.card-head h3 { margin: 0; }
.card-ico .ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  color: var(--ico); background: color-mix(in srgb, var(--ico) 13%, transparent);
}
.card-ico .ico svg { width: 20px; height: 20px; display: block; }
.ico-orange    { --ico: #f07318; }   /* the brand orange, for the original case */
.ico-rose   { --ico: #d6455c; }
.ico-violet  { --ico: #7b5cd6; }
.ico-teal  { --ico: #1f8a70; }
.ico-blue { --ico: #2f7fd1; }
.ico-amber    { --ico: #c2860a; }
@media (prefers-color-scheme: dark) {
  /* Lift each hue off the navy surface; the same colours go muddy at these weights on dark. */
  .ico-orange { --ico: #ff9445; } .ico-rose { --ico: #ef6d80; } .ico-violet { --ico: #a992f0; }
  .ico-teal { --ico: #4cbb9b; } .ico-blue { --ico: #62a8ec; } .ico-amber { --ico: #e0aa38; }
  .card-ico .ico { background: color-mix(in srgb, var(--ico) 18%, transparent); }
}
/* These cards carry more text than the plain ones, so give the grid wider tracks. */
.grid-ico { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---- abstract coordination figure behind the frameworks section ---- */
/* Inline rather than a background-image, because an SVG loaded as a background is a separate
   document: currentColor would resolve to black there instead of to the theme's ink. Inline, it
   inherits, so one drawing serves both themes. */
.has-mesh { position: relative; isolation: isolate; }
.mesh-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  color: var(--ink); opacity: .08; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.mesh-bg svg { width: 100%; height: 100%; display: block; }
@media (prefers-color-scheme: dark) { .mesh-bg { opacity: .16; } }

/* ---- framework enquiry: the form inside the pricing card ---- */
/* Same card as the pricing page's bespoke row, with the form as a third element that spans the
   full width beneath the blurb and the figure. */
.bespoke-card-form { max-width: none; }
.bespoke-card-form .bespoke-blurb { flex: 1 1 20rem; }
/* The global form rule caps a form at 42rem, which is what kept this one narrow. The cap is
   dropped so it spans the container and runs under the figure as well as the blurb; its white
   panel is kept, because it is what separates the fields from the tinted card behind them. */
.bespoke-card-form form {
  flex: 1 0 100%; max-width: none; margin-top: .6rem;
}
/* Optical alignment: the figure is set much larger than the paragraph beside it, so its glyphs
   sit nearer the top of their line box. A small nudge puts the two tops on the same line. */
.bespoke-card-form .bespoke-price { padding-top: .3rem; }
.bespoke-card-form .bespoke-price .price { line-height: 1.1; }
/* At full width a single column of inputs stretches past the point where a text field is
   comfortable to read back, so the short fields pair up and only the message runs wide. */
@media (min-width: 720px) {
  .bespoke-card-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
  .bespoke-card-form form > .notice,
  .bespoke-card-form form > .field:has(textarea),
  .bespoke-card-form form > button,
  .bespoke-card-form form > p { grid-column: 1 / -1; }
}

/* A same-page jump should land under the sticky header rather than behind it, and should glide
   rather than teleport for anyone who has not asked otherwise. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target { scroll-margin-top: 5.5rem; }

/* ---- numbered workflow ---- */
/* An ordered list rather than a grid of cards: the order is the meaning here, so it should be in
   the markup and not only in the numerals. Connectors are drawn in the gap between steps, and
   turn from horizontal to vertical when the steps stack. */
.flow {
  list-style: none; margin: 1.4rem 0 1.8rem; padding: 0;
  display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.flow > .card { position: relative; }
.flow > .card::after {
  /* z-index lifts the connector above the next card, which is a later sibling and would
     otherwise paint over it wherever the two overlap. */
  content: ""; position: absolute; z-index: 2; color: var(--accent);
  width: 11px; height: 11px; border-top: 2px solid; border-right: 2px solid;
}
/* side by side: chevron points right, centred in the gap */
@media (min-width: 900px) {
  .flow > .card:not(:last-child)::after {
    top: 50%; right: -.85rem; transform: translate(50%, -50%) rotate(45deg);
  }
}
/* stacked: chevron points down, centred under the card */
@media (max-width: 899px) {
  .flow > .card:not(:last-child)::after {
    left: 50%; bottom: -.85rem; transform: translate(-50%, 50%) rotate(135deg);
  }
}
.flow > .card:last-child::after { content: none; }

/* FAQ groupings: a heading between sets of questions, sitting closer to the set it introduces
   than to the one above it. */
h3.faq-group {
  margin: 2.2rem 0 .7rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule);
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
h3.faq-group:first-of-type { margin-top: 1.4rem; }

/* Legal and transactional pages: a reading measure rather than the full page width. */
.wrap.narrow { max-width: 46rem; }

/* The order form runs the full page width. Short fields pair up so a text input never stretches
   past the point where its content is comfortable to read back; the long ones span. */
form.form-wide { max-width: none; }
@media (min-width: 760px) {
  form.form-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
  form.form-wide > .notice,
  form.form-wide > button,
  form.form-wide > .hint,
  form.form-wide > .field:has(textarea),
  form.form-wide > .field:has(.tier-choices),
  form.form-wide > .field:has(input[type="file"]),
  form.form-wide > .consent-row { grid-column: 1 / -1; }
}

.details{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.25rem;margin:1rem 0 1.25rem;padding:1rem 1.25rem;background:var(--surface-2);border-radius:10px}
.details dt{font-weight:600}
.details dd{margin:0}
@media (max-width:560px){.details{grid-template-columns:1fr;gap:.1rem}.details dd{margin-bottom:.6rem}}
.price .inc-vat { display: block; font-size: .85rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; margin-top: .25rem; opacity: .75; }
.tier-choice-head .inc-vat { font-size: .8em; font-weight: 400; opacity: .75; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Sister-site line: a full-width row at the top of the footer, above the company line. */
footer.site .foot-text { flex: 1 1 28rem; max-width: 62ch; }
footer.site .sister { margin: 0 0 .6rem; font-size: .85rem; color: var(--on-navy-2); }
footer.site .sister a { margin-right: 0; font-size: inherit; text-decoration: underline; }
label.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
label.check input { width: auto; margin-top: .3rem; flex: none; accent-color: var(--accent); }
main { flex: 1 0 auto; }
body > header.site, body > footer.site { flex-shrink: 0; }
.human-check { margin: .4rem 0 1rem; min-height: 65px; }
.dropzone.waiting { opacity: .6; }
/* Buy form: the start-now acknowledgement with the Turnstile check to its right; stacks when narrow. */
.consent-row { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem 1.4rem; }
.consent-row > .field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.consent-row > .human-check { flex: 0 0 300px; margin: 0; }   /* the Turnstile widget's own width */
@media (max-width: 700px) {
  .consent-row { flex-wrap: wrap; }
  .consent-row > .field, .consent-row > .human-check { flex-basis: 100%; }
}