/* Bracton site styles.

   One ordered sheet, consolidated 20 September 2026. What was here before had
   grown by appended blocks, five separate :root declarations and forty two
   selectors written three or more times, with each new block overriding the
   one above it rather than replacing it. The rendered pages are unchanged. What
   follows is the state the browser was already computing, written once.

   The order is the order a page is built in. The variables, then the base
   elements, then the header, the hero and the page head, then the sections and
   their titles, then each component once, then the media queries gathered at
   the foot in width order.

   The palette is the identity approved on 28 August 2026 with the purple added
   on 20 September 2026: Chancery Blue for the bands, the buttons and the tile
   rules, Counsel Black for text, white for the ground, and a deep purple for
   the accents, being the key phrases on the dark hero as a lilac, the
   hairlines, the eyebrows, the hovers and the founder band. The green and
   oxblood names are kept as aliases pointing at the blue, because the page
   level style blocks on several pages still read them.

   The typefaces are Adliora's, set on 20 September 2026: Marcellus for the
   headlines and General Sans for the text. Marcellus has one weight, so every
   heading runs at 400. */

:root {
  /* the palette */
  --blue: #16335e;
  --blue-deep: #0f2545;
  --blue-line: #c9d3e3;
  --plum: #5b3f8f;
  --plum-deep: #3f2a66;
  --plum-wash: #f3effb;
  --plum-line: #d9cdf0;
  --lilac: #c4b1ee;
  --sky: var(--lilac);
  --ribbon: #d68c9e;
  --ink: #101820;
  --ink-soft: #49525f;
  --paper: #ffffff;
  --parchment: #f3f5f8;
  --rule: #dde2ea;
  --rule-dark: rgba(243, 241, 233, .22);
  --hero-bg: #101820;

  /* The earlier green and oxblood names, pointed at the blue in one place so
     every band, button and hover follows without the sheet being rewritten
     through. The page level blocks on the assessment, refusals and buying
     pages read these names directly. */
  --green: var(--blue);
  --green-deep: var(--blue-deep);
  --on-green: #ffffff;
  --ox: var(--blue);
  --ox-deep: var(--blue-deep);

  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* The type scale. Five steps on a ratio of 1.4, each doing one job, with the
     job deciding the step rather than the taste of whoever wrote the rule:

       1  uppercase labels, captions, small print, the footer
       2  body prose, navigation, buttons, anything a reader reads in full
       3  ledes, standfirsts, card headings, one line answers
       4  sub headings inside a section
       5  the wordmark and the headings a page level block still sizes by name

     Steps three to five are fluid, so the range compresses on a handset
     instead of a media query redefining a size further down the file. */
  --fs-1: .76rem;
  --fs-2: 1.06rem;
  --fs-3: clamp(1.22rem, .95rem + 1.15vw, 1.48rem);
  --fs-4: clamp(1.5rem, 1.05rem + 1.9vw, 2.08rem);
  --fs-5: clamp(1.9rem, 1.2rem + 3vw, 2.9rem);

  /* The two display sizes the 20 September layout added, being the section
     title and the title of a media block. */
  --fs-title: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-block: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem);

  /* The corner scale. Four steps, and the job decides the step, as with the
     type scale above.

       control  buttons, inputs, tags, and any card that acts as a control
       card     content cards and the framed media on plain pages
       frame    the rounder full width frames on the spatial pages
       band     the handset device frame

     Circles stay at 50 per cent, pills at 999px and full bleed edges at 0,
     because those are shapes rather than sizes. */
  --r-control: 3px;
  --r-card: 6px;
  --r-frame: 16px;
  --r-band: 26px;

  /* The shadow scale, governed like the corner scale above. Anything sitting
     in the page casts the site ink while the floating overlay casts black.

       control  the small lift under the photograph mark
       frame    the lift under the handset device
       overlay  the consent bar over the page, with an upward form for the
                phone sheet */
  --sh-control: 0 2px 10px -4px rgba(33, 32, 28, .5);
  --sh-frame: 0 18px 44px -30px rgba(33, 32, 28, .55);
  --sh-overlay: 0 18px 50px rgba(0, 0, 0, .42);
  --sh-overlay-up: 0 -18px 50px rgba(0, 0, 0, .42);

  --brand-word-size: var(--fs-5);
  --wrap: 1440px;
}

/* ---------------------------------------------------------------------------
   Base elements
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
/* A phone in landscape inflates text on its own unless it is told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-2);
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Marcellus has one weight, so every heading runs at 400 and the tracking the
   earlier faces needed comes off. */
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }

/* Two families load and no more, being Marcellus at 400 and General Sans at
   400, 500 and 600. Anything asking for a weight or a slope that was never
   cut is drawn by the browser out of the nearest one it has, which reads on
   the page as a third and a fourth face. So bold text takes the 600 that
   exists rather than the 700 that does not, and the form controls take the
   page's own family, size and colour instead of the operating system's. */
b, strong { font-weight: 600; }
/* The controls take the page's own family, size and colour rather than the
   operating system's. Inheriting the size also keeps every field and button at
   or above sixteen pixels, which is the point below which an iPhone zooms the
   page when a field takes focus. The smallest control on the site computes to
   just under seventeen. */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Every link in the body of this site marks itself with a one pixel rule that
   darkens under the pointer. */
p a, .article-body a { color: var(--plum); border-bottom: 1px solid var(--plum-line); }
p a:hover, .article-body a:hover { border-bottom-color: var(--plum); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.2rem, 2.3vw, 2rem); }
.skip-link { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: .5em 1em; z-index: 200; }
.skip-link:focus { left: 0; top: 0; }

/* anchor targets: static markers that ignore the header set over the page */
.anchor-mark { position: relative; height: 0; scroll-margin-top: 84px; }
.panel[id], section[id] { scroll-margin-top: 84px; }

/* A section's padding was landing on top of the bottom margin of the last
   thing inside it, so the page carried bands of nothing between one subject
   and the next. */
section > .wrap > :last-child,
section > .wrap > :last-child > :last-child { margin-bottom: 0; }
.section-intro:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   The header, set over the page. The wordmark and the facet sit left and the
   links right, with no bar behind them, so the hero runs to the top of the
   window. On a dark hero the whole lockup turns white through body.dark-head.
   --------------------------------------------------------------------------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: transparent; backdrop-filter: none; border-bottom: 0; overflow: visible; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; padding-bottom: 1.6rem; overflow: visible; }

/* The facet stands as tall as the capital B of the wordmark, on Saqib's
   instruction of 20 September 2026. Its two lower faces lighten on a dark
   ground, where the blue would otherwise sink into it. */
.brand { display: inline-flex; flex-direction: row; align-items: center; gap: .55rem; color: var(--ink); overflow: visible; }
.brand-mark { display: block; flex: none; align-self: flex-start; width: auto; height: calc(var(--brand-word-size) * .78); margin-top: 0; }
.brand-mark path { stroke: currentColor; }
.brand-mark .facet-a { fill: var(--plum); }
.brand-mark .facet-b { fill: #8d74c3; }
.brand-mark .facet-c { fill: var(--blue); }
.brand-mark .facet-d { fill: var(--blue-deep); }
body.dark-head .brand-mark .facet-c, .footer-facet .facet-c { fill: #3b5a8f; }
body.dark-head .brand-mark .facet-d, .footer-facet .facet-d { fill: #2a4472; }
.footer-facet { height: 34px; }

/* The wordmark is Marcellus mixed case, drawn as outlines from the font with
   its full bounds so nothing is cut at the top and so it takes its parent's
   colour without a web licence. It is step five of the scale rather than a
   size of its own, so the lockup compresses on a handset. */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; }
.brand-word { display: inline-flex; align-items: flex-start; font-family: var(--serif); font-size: var(--brand-word-size); font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--ink); overflow: visible; }
.brand-word-svg { display: block; width: auto; height: calc(var(--brand-word-size) * .78); overflow: visible; }
.tm { font-size: .25em; font-weight: 400; color: var(--ink-soft); }
.brand .tm { font-family: var(--sans); font-size: .55rem; font-weight: 500; line-height: 1; margin-left: 3px; margin-top: -2px; }
.brand-strap { display: none; font-family: var(--serif); font-size: var(--fs-2); font-weight: 400; color: var(--ink-soft); margin-top: .1rem; }

.nav { display: flex; gap: .3rem; }
.nav a {
  font-family: var(--sans); font-size: var(--fs-2); font-weight: 500; letter-spacing: .02em;
  color: var(--ink); background: none; padding: .35em .7em;
  border-radius: var(--r-control); white-space: nowrap;
  transition: background-size .35s ease;
}
.nav a:hover { background: none; color: var(--plum); }
.nav a[aria-current="page"] { color: var(--ink); font-style: normal; text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--plum); }

/* Contact is the quiet pill and See it run is the one in colour. */
.nav a.nav-cta { font-family: var(--sans); font-weight: 600; color: var(--ink); background: none; border: 2px solid var(--blue); border-radius: 50px; padding: .5em 1.2em; margin-left: .6rem; }
.nav a.nav-cta:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
.nav .nav-ghost { border: 1px solid var(--rule); color: var(--ink); background-image: none; margin-left: .4rem; padding: .5em 1.1em; }
.nav .nav-ghost:hover { border-color: var(--ink-soft); background-color: var(--parchment); }

/* The bars stay 22 pixels wide. The button around them is held at 44 by 44,
   because on a phone this is the only way into the rest of the site. */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; flex-direction: column; gap: 5px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; }
.site-header .nav-toggle:hover { color: var(--plum); }

body.dark-head .site-header, body.dark-head .brand, body.dark-head .brand-word,
body.dark-head .nav a, body.dark-head .nav-toggle { color: #fff; }
body.dark-head .nav a:hover { color: var(--sky); }
body.dark-head .nav a[aria-current="page"] { text-decoration-color: var(--sky); }
body.dark-head .nav a.nav-cta { border-color: var(--sky); }
body.dark-head .nav a.nav-cta:hover { background: var(--sky); color: var(--ink); }
body.dark-head .brand:hover .brand-word { color: var(--sky); }
.brand:hover .brand-word { color: var(--ox); }

/* ---------------------------------------------------------------------------
   Type helpers and the two buttons
   --------------------------------------------------------------------------- */
.eyebrow { font-size: var(--fs-1); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--plum); margin: 0 0 1.1rem; }
.accent { font-style: normal; font-weight: 400; color: var(--plum); }

.btn, button.btn {
  display: inline-block; font-size: var(--fs-2); font-weight: 500;
  background: transparent; color: var(--ink);
  border: 2px solid var(--blue); border-radius: 50px; padding: .7em 1.5em;
  transition: background .18s ease;
}
button.btn { font-family: var(--sans); line-height: 1.65; cursor: pointer; }
.btn:hover, button.btn:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
.hero-ghost { font-weight: 600; color: var(--ink); padding-bottom: 2px; margin-left: 1.4rem; border-bottom: 0; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--blue-line); }
.hero-ghost:hover { color: var(--plum); text-decoration-color: var(--plum); }
/* The two links on the founder band inherited Marcellus from the statement
   beside them and asked it for a weight it does not have. A link that names
   the next page is a label rather than a heading, so it names the text face
   for itself. */
.more-link { font-family: var(--sans); font-weight: 600; color: var(--plum); }
.more-link:hover { color: var(--ox-deep); }

/* ---------------------------------------------------------------------------
   The home page hero, dark and full width, with the key phrases of the
   headline carrying the lilac.
   --------------------------------------------------------------------------- */
.hero, .stack .panel.hero {
  background: var(--hero-bg);
  background-image: radial-gradient(60% 80% at 85% 20%, rgba(91, 63, 143, .55), transparent 70%);
  color: #fff; border: 0; border-radius: 0;
  padding: clamp(7rem, 12vh, 8.5rem) 0 clamp(2.6rem, 5vh, 3.6rem);
}
.hero-inner { display: block; width: 100%; box-sizing: border-box; min-width: 0; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; padding-top: 0; padding-bottom: 0; }
.hero-title { font-family: var(--serif); font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.2rem); font-weight: 400; line-height: 1.14; letter-spacing: 0; max-width: 22ch; margin: 0 0 2.2rem; color: #fff; }
.hero-title .accent { color: var(--sky); font-weight: 400; font-style: normal; }
.hero .eyebrow { color: var(--lilac); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 0; }
.hero .btn { color: #fff; border-color: var(--sky); }
.hero .btn:hover { background: var(--lilac); border-color: var(--lilac); color: var(--ink); }
.hero .hero-ghost { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.hero .hero-ghost:hover { text-decoration-color: var(--sky); }

/* ---------------------------------------------------------------------------
   The inner page head, light, with the second line of the headline in italic.
   The lede takes the left and the claims and the button take the right, so the
   width carries two things rather than one.
   --------------------------------------------------------------------------- */
.page-head { border-bottom: 0; padding: clamp(6.5rem, 11vh, 8rem) 0 clamp(1.6rem, 3vh, 2.4rem); }
.page-head h1 { font-family: var(--serif); font-size: var(--fs-title); font-weight: 400; line-height: 1.14; letter-spacing: 0; max-width: 26ch; margin: 0; }
.page-head h1 .accent { color: var(--blue); font-weight: 400; font-style: normal; }
.page-head .eyebrow { color: var(--plum); }
.page-head .eyebrow a { border-bottom: 1px solid var(--rule); }
.page-head .eyebrow a:hover { color: var(--ox); }
.page-head .topline { display: block; box-sizing: border-box; min-width: 0; }
.page-head .topline > div + div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  margin-top: clamp(1.6rem, 3.5vh, 2.6rem); padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid var(--plum-line);
}
.page-head .lede { font-size: var(--fs-3); color: var(--ink); max-width: 30ch; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
.page-head .claims { margin: 0; grid-column: 2; }
.page-head .topline-act { grid-column: 2; margin-top: .4rem; }
.page-head .topline-shot, .page-head .shot-figure { margin-top: clamp(2rem, 4vh, 3rem); }

/* The top tier used on pages that carry it without the page head grid. */
.topline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); gap: clamp(1.2rem, 3vw, 3rem); align-items: start; }
.topline .lede { margin-top: 0; }
.topline-act { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 0; margin-top: 1.5rem; }
.topline-shot { margin-top: clamp(1.6rem, 3.4vh, 2.4rem); }
.claims { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.claims li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.claims li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--plum); }
.claims b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Sections and their titles. A section opens on a one pixel accent hairline
   drawn by the wrap, with the title under it.
   --------------------------------------------------------------------------- */
.section { padding: clamp(2.4rem, 5vh, 4rem) 0; }
/* The insights band on the hub and the six subject pages is marked by name
   rather than by the shared section class. */
section.insights { padding: clamp(2rem, 3.8vh, 3rem) 0; }
.section > .wrap::before, .page-head + .section > .wrap::before { content: ""; display: block; height: 1px; background: var(--plum-line); margin: 0 0 1.8rem; }
.section-title { font-family: var(--serif); font-size: var(--fs-title); font-weight: 400; line-height: 1.1; letter-spacing: 0; max-width: 26ch; margin: 0 0 1.2rem; }
.section-intro { font-size: var(--fs-3); color: var(--ink-soft); max-width: 62ch; margin: 0 0 1.8rem; }

/* A way to act at one decision point in the middle of a page. There was one of
   these every screenful, which on a purchase of this size read as pressure, so
   a page now carries one at most and the rest of the routes onward are links
   in the copy. */
.cta-rule {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding: 1rem 0; margin: clamp(1.8rem, 3.4vh, 2.6rem) 0;
}
.cta-rule p { margin: 0; color: var(--ink); max-width: 62ch; }
.cta-rule .btn { flex: none; }

/* animated heading rules, the line starting at the first word and filling
   along each text line. The words are wrapped by script.js. */
.uw {
  background-image: linear-gradient(to right, var(--green), var(--green));
  background-repeat: no-repeat; background-size: 0 2px; background-position: 0 100%;
  padding-bottom: .12em; text-shadow: none;
  transition-property: background-size; transition-timing-function: linear;
}
main h1:hover .uw, main h2:hover .uw, main h3:hover .uw,
main a:hover .uw, .insight-item:hover .uw { background-size: 100% 2px; }
.assess-cta .uw, .check-result .uw { background-image: linear-gradient(to right, #7fae97, #7fae97); }

/* ---------------------------------------------------------------------------
   Product screens. Screenshots of the working software are framed rather than
   floated on the page, so a reader takes them as a window onto the product.
   Every one carries a caption saying that it is illustrative and that the
   client names inside it are invented.

   The frame fills its column, so both edges meet the text above and below it.
   The shape is set here as well as on the file, so a window widened from a
   phone width to a desktop one cannot draw the tall phone crop at the full
   column width.
   --------------------------------------------------------------------------- */
.shot { margin: 0; }
.shot-frame { border: 1px solid var(--rule); border-radius: 24px; overflow: hidden; background: var(--parchment); box-shadow: 0 18px 50px rgba(16, 24, 32, .10); }
.shot-frame img, .shot-frame picture { width: 100%; display: block; }
.shot-frame img { aspect-ratio: 2256 / 1484; }
.shot-bar { display: none; align-items: center; gap: .8rem; padding: .55rem .9rem .3rem; }
.shot-name { font-size: var(--fs-1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-cap { font-size: var(--fs-2); color: var(--ink-soft); max-width: none; margin: 1rem 0 0; }
.shot-cap b { color: var(--ink); font-weight: 600; }
.shot-figure { max-width: none; margin-inline: 0; }
.shot-stack { display: grid; gap: clamp(1.8rem, 3.4vh, 2.6rem); }
.shot-motion-what { font-size: var(--fs-2); color: var(--ink-soft); margin: .5rem 0 0; max-width: none; }

/* the platform, screen by screen, each screen in a box under a blue band */
.shot-block { background: #fff; border: 1px solid var(--rule); border-top: 5px solid var(--blue); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); padding: 1.4rem clamp(1.1rem, 2.4vw, 1.8rem) 1.6rem; }
.shot-block + .shot-block { border-top: 5px solid var(--blue); padding-top: 1.4rem; }

/* the heading beside the explanation, so the width carries two things */
.shot-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); gap: clamp(1.2rem, 3vw, 3rem); align-items: start; margin: 0 0 clamp(1.3rem, 3vh, 1.9rem); }
.shot-lead h3 { font-family: var(--serif); font-size: var(--fs-4); font-weight: 400; line-height: 1.16; letter-spacing: 0; color: var(--blue); margin: 0; }
.shot-lead p { color: var(--ink-soft); margin: 0 0 1em; }
.shot-lead p:last-child { margin-bottom: 0; }

/* a screen set against the dark ground of the review band */
.assess-cta .shot-frame { border-color: var(--rule-dark); }
.assess-cta .shot-cap { color: rgba(243, 241, 233, .8); }
.assess-cta .shot-cap b { color: var(--on-green); }

/* the same treatment for a narrow screen, framed as a handset. The width is
   set here rather than left to the image, because a lazily loaded picture has
   no intrinsic width until it is fetched and the frame collapsed around it. */
.device { border: 1px solid var(--rule); border-radius: var(--r-band); padding: 9px; background: var(--parchment); width: 400px; max-width: 100%; flex: 0 0 auto; box-shadow: var(--sh-frame); }
/* The inner corner is the outer one less the 9 pixel padding and the hairline,
   so the two curves share a centre rather than pinching at the corner. */
.device img { width: 100%; display: block; border-radius: calc(var(--r-band) - 10px); border: 1px solid var(--rule); }

/* ---------------------------------------------------------------------------
   Photographs. Two contexts and two widths, kept to the same discipline as the
   product screens, so a reader never meets two sizes of the same thing.

   The Bracton mark is drawn over each photograph in CSS rather than burnt into
   the files. That keeps it sharp at any screen density, leaves the source
   photographs untouched so they can be recropped later, and makes a change to
   the mark one edit rather than one per file.
   --------------------------------------------------------------------------- */
.photo { display: block; position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--parchment); }
.photo img { display: block; width: 100%; height: auto; }
/* The mark itself. Its content is the empty string, so nothing reaches the
   accessibility tree. The plate behind it is what keeps it legible, because
   the set runs from a sunlit skyline to an unlit study and neither a light
   mark nor a dark one reads on both. The weakest pairing in the set lands at
   5.4 to 1 against this much ink. */
.photo::after {
  content: "";
  position: absolute;
  top: var(--mark-inset); right: var(--mark-inset);
  width: var(--mark-size); height: var(--mark-size);
  border-radius: var(--r-card);
  background-color: rgba(10, 24, 20, .66);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='10 9 44 46'%3E%3Cpath d='M22 12 H13 V52 H22' fill='none' stroke='%23f3f1e9' stroke-width='5.4'/%3E%3Cpath d='M42 12 H51 V52 H42' fill='none' stroke='%23f3f1e9' stroke-width='5.4'/%3E%3Crect x='24' y='19' width='16' height='5.2' rx='2.6' fill='%23f3f1e9'/%3E%3Crect x='24' y='29.4' width='16' height='5.2' rx='2.6' fill='%23f3f1e9'/%3E%3Crect x='24' y='39.8' width='9' height='5.2' rx='2.6' fill='%23f3f1e9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 56% auto;
  border: 1px solid rgba(243, 241, 233, .22);
  box-shadow: var(--sh-control);
  pointer-events: none;
}
/* The photograph at the head of an article fills its column, both edges flush
   with the masthead, the headline and the prose below it. The shape is set
   here as well as on the file, so a window resized after the picture element
   has already chosen a source cannot draw it at the wrong height. */
.article-photo { padding-top: clamp(1.4rem, 3vh, 2.2rem); }
.photo--article { --mark-size: 40px; --mark-inset: 16px; }
.photo--article img { aspect-ratio: 12 / 5; }
/* The same photograph on its card in the index. The card carries no border or
   padding, so the picture runs the width of the column on its own. */
.photo--card { --mark-size: 28px; --mark-inset: 10px; border-radius: 0; margin: 0 0 1.1rem; }
.photo--card img { aspect-ratio: 16 / 9; }

/* Drawings, for the parts of the product that cannot be photographed. */
.illus { margin: 0; }
.illus img { width: 100%; display: block; }
.illus-cap { font-size: var(--fs-1); color: var(--ink-soft); margin: .9rem 0 0; max-width: 66ch; }
/* The chapter drawings on the assistant page below the spatial breakpoint,
   where the chapter is one column and the drawing follows the prose. */
.cap-fig { margin: 1.2rem 0 0; }
.cap-fig img { width: 100%; max-width: 620px; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   The work blocks on the home page, each a full width media block with its
   title beneath it and a small label under that.
   --------------------------------------------------------------------------- */
.work-list { display: grid; gap: clamp(3rem, 7vh, 5.5rem); }
.work-block { display: block; color: inherit; }
.work-block .shot-frame { transition: transform .35s ease; }
.work-block:hover .shot-frame { transform: translateY(-4px); }
.work-block h3 { font-family: var(--serif); font-size: var(--fs-block); font-weight: 400; line-height: 1.15; letter-spacing: 0; margin: 1.4rem 0 .35rem; color: var(--plum); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--plum-line); }
.work-block:hover h3 { text-decoration-color: var(--plum); }
.work-block .work-label { margin: 0; color: var(--ink-soft); font-size: var(--fs-2); }

/* ---------------------------------------------------------------------------
   The white tiles. Four proofs in a row that each open the page holding the
   proof, and the two routes a firm chooses between, on the same card.
   --------------------------------------------------------------------------- */
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(1.4rem, 3vh, 2.2rem) 0; }
.proof { display: block; background: #fff; border: 1px solid var(--rule); border-top: 5px solid var(--blue); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); padding: 1.3rem 1.3rem 1.4rem; color: inherit; text-decoration: none; transition: transform .2s ease; }
.proof:hover { transform: translateY(-3px); }
.proof h3 { font-family: var(--serif); font-size: var(--fs-3); font-weight: 400; line-height: 1.2; letter-spacing: 0; margin: 0 0 .5rem; color: var(--blue); }
.proof p { font-size: var(--fs-2); margin: 0; color: var(--ink-soft); }
.proof:hover h3, .proof:focus-visible h3 { color: var(--ox); }
.proof:focus-visible { outline: 2px solid var(--ox); outline-offset: 6px; }

/* The one section that carries this class also carries .section, which set
   the band's height, so the shorter padding this component once asked for has
   never applied and is not restated here. */
.choose .section-title { margin-bottom: 2.2rem; }
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.choose-card { background: #fff; border: 1px solid var(--rule); border-top: 5px solid var(--blue); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); padding: 1.4rem clamp(1.1rem, 2.4vw, 1.8rem) 1.5rem; }
.choose-card h3 { font-family: var(--serif); font-size: var(--fs-4); font-weight: 400; line-height: 1.15; letter-spacing: 0; margin: 0 0 .6rem; color: var(--blue); }
.choose-card p { color: var(--ink-soft); margin: 0 0 1em; }
.choose-card .more-link { font-size: var(--fs-2); }
.choose-when { font-size: var(--fs-1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin: 0 0 .6rem; }
.choose-note { max-width: 68ch; margin: 1.4rem 0 0; color: var(--ink-soft); }
.choose-card--lead { border-top-color: var(--blue); }

/* ---------------------------------------------------------------------------
   The insights, as three rounded image cards on the home page and as the hub
   grid on the index.
   --------------------------------------------------------------------------- */
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.ins-card { display: block; color: inherit; }
.ins-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: var(--parchment); transition: transform .35s ease; }
.ins-card:hover img { transform: translateY(-4px); }
.ins-card h3 { font-family: var(--serif); font-size: var(--fs-3); font-weight: 400; line-height: 1.2; letter-spacing: 0; margin: 1rem 0 .4rem; color: var(--plum); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--plum-line); }
.ins-card:hover h3 { text-decoration-color: var(--plum); }
.ins-card p { margin: 0; color: var(--ink-soft); }
.ins-card .ins-kind { display: block; font-size: var(--fs-1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin: 0 0 .3rem; }

.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.insight-item { display: block; position: relative; padding: 0; }
.insight-item[hidden] { display: none; }
.insight-kind { font-size: var(--fs-1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.insight-item h3, .insight-item h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.28; margin: .5rem 0 .5rem; }
.insight-item p { font-size: var(--fs-2); color: var(--ink-soft); margin: 0; }

/* THE HUB IS READ SIX AT A TIME. Every article the firm has written stood on
   one page, so the page a reader came to for one piece asked them to scroll
   past all of it. Six fills two rows of the grid and leaves the rest a click
   away. The pager is built by the script from the cards already in the page,
   and its links carry an ordinary page number in the address, so a page can be
   sent to somebody who will see what the sender saw. A reader with no script
   sees every card, which is where this started. */
.pager { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.pager-count { font-size: var(--fs-1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.pager-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0 .9rem; margin: 0 auto 0 0; padding: 0; }
.pager-list a { font-size: var(--fs-2); color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: .1rem; }
.pager-list a:hover { color: var(--ox); border-bottom-color: var(--ox); }
.pager-list a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.pager-step { font-size: var(--fs-2); color: var(--ink); border-bottom: 1px solid var(--rule-dark); padding-bottom: .1rem; }
.pager-step:hover { color: var(--ox); border-bottom-color: var(--ox); }

/* The six subject pages over Insights, added 18 September 2026. */
.subject-lead { max-width: 62ch; margin: 0 0 1.6rem; }
.subject-intro { font-size: var(--fs-2); color: var(--ink-soft); margin: 0 0 1em; }
.subject-count { font-size: var(--fs-1); color: var(--ink-soft); margin: 0 0 2rem; }
.subject-others { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.subject-strip { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .6rem; }
.subject-strip a, .subject-strip span[aria-current] { font-size: var(--fs-2); }
.subject-strip span[aria-current] { color: var(--plum); }

/* ---------------------------------------------------------------------------
   The podcast band on the home page, the cover beside the standing invitation.
   --------------------------------------------------------------------------- */
.podcast-band { background: var(--plum-deep); color: #fff; padding: clamp(2.4rem, 5vh, 4rem) 0; border-radius: 0; }
.podcast-inner { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.podcast-cover { display: block; width: 240px; height: 240px; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.podcast-band .eyebrow { color: var(--lilac); }
.podcast-title, .podcast-band .podcast-title, .spatial .podcast-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); line-height: 1.1; margin: 0 0 .8rem; color: #fff; }
.podcast-sub { color: rgba(255, 255, 255, .82); max-width: 60ch; margin: 0 0 1.4rem; }
.podcast-band .btn { color: #fff; border-color: var(--lilac); }
.podcast-band .btn:hover { background: var(--lilac); border-color: var(--lilac); color: var(--ink); }

/* ---------------------------------------------------------------------------
   The founder band and the review band, the two coloured grounds left on the
   site. The founder band takes the deep purple and the review band the blue.
   --------------------------------------------------------------------------- */
.about { background: var(--plum-deep); color: var(--on-green); padding: clamp(2rem, 3.8vh, 3rem) 0; border-radius: 0; }
.about .eyebrow, .assess-cta .eyebrow { color: var(--ribbon); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-5); line-height: 1.1; margin: 0 0 1rem; color: var(--on-green); }
.about-main p { color: rgba(243, 241, 233, .82); max-width: 58ch; }
.about-line { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline; }
.about-quote, .about-insights { font-family: var(--serif); font-size: var(--fs-4); font-weight: 400; line-height: 1.3; letter-spacing: 0; margin: 0; color: #fff; }
.about-line .about-quote { margin: 0; }
.about-line .about-insights { margin: 0; font-size: var(--fs-2); color: rgba(243, 241, 233, .82); }
.about-line .more-link { color: #e5a33c; }
.about .more-link { color: var(--lilac); }
.about .more-link:hover { color: #f0b558; }

.assess-cta { background: var(--green-deep); color: var(--on-green); padding: clamp(2rem, 3.8vh, 3rem) 0; }
.assess-cta-inner { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.2vh, 1.5rem); align-items: start; }
.assess-cta-inner > * { max-width: 62ch; }
.assess-cta .section-title { color: var(--on-green); }
.assess-cta-side p { max-width: 62ch; color: rgba(243, 241, 233, .82); margin: 0 0 1.4rem; }
.assess-cta .btn { background: var(--on-green); color: var(--green-deep); border-color: var(--on-green); }
.assess-cta .btn:hover { background: #fff; }
/* Where this band is not one of a page's three calls to action, the route
   onward stays as a link in the copy rather than a fourth button. The gold
   reaches 4.78 to 1 on the dark ground, where the accent would land at 1.38. */
.assess-cta-side a { color: #e5a33c; border-bottom: 1px solid rgba(229, 163, 60, .4); }
.assess-cta-side a:hover { border-bottom-color: #e5a33c; }
.assess-cta-side .btn { border-bottom: 0; }
.about p a, .assess-cta p a { color: #e5a33c; border-bottom-color: rgba(229, 163, 60, .45); }
.about p a:hover, .assess-cta p a:hover { color: #f0b558; border-bottom-color: #f0b558; }
.about .reading, .assess-cta .reading { border-left-color: rgba(243, 241, 233, .3); }
.about .reading-kind, .assess-cta .reading-kind { color: rgba(243, 241, 233, .7); }
.about .reading p, .assess-cta .reading p { color: rgba(243, 241, 233, .82); }
.about .reading a, .assess-cta .reading a { color: #e5a33c; border-bottom-color: rgba(229, 163, 60, .45); }
.about .reading a:hover, .assess-cta .reading a:hover,
.about .reading a:focus-visible, .assess-cta .reading a:focus-visible { color: #f0b558; border-bottom-color: #f0b558; }

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */
.contact { padding: clamp(2rem, 3.8vh, 3rem) 0; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.2vh, 1.5rem); align-items: start; }
.contact-grid > * { max-width: 62ch; }
.contact-title { font-family: var(--serif); font-size: var(--fs-5); font-weight: 400; line-height: 1.08; letter-spacing: 0; margin: 0; max-width: 14ch; }
.contact-title::before { content: ""; display: block; width: auto; height: 1px; background: var(--plum-line); border-radius: 0; margin: 0 0 1.6rem; }
.contact-side p { color: var(--ink-soft); font-size: var(--fs-3); max-width: 50ch; margin-top: 0; }
.contact-address { margin: 1rem 0 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   The numbered entries, built on the native details element rather than on a
   substitute, so each is reachable from the keyboard and announces whether it
   is open without a line of code written for either.

   The rule that matters is what a reader gets without opening anything. The
   visible summary carries the position itself, not a label pointing at it, so
   a partner who reads only the summaries down a page has the whole argument.

   How it survives with scripting off. Every one of these ships with the open
   attribute set, so the content is in the HTML for a crawler and open on the
   page for a reader with no scripting. The rule below hides the body only
   while the page is still marked as scripted and the attribute is still there,
   which is the window before script.js takes the attribute off. If script.js
   never arrives, the head script puts the page back to no-js and every section
   is open and readable again.

   Inner pages take the Forepoint two column shape, so the section's title and
   introduction stand on the left and the entries run on the right as headings
   and prose, without boxes, opening on a click where a fold holds the detail.
   --------------------------------------------------------------------------- */
.wrap.disc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.wrap.disc-cols::before { grid-column: 1 / -1; }
.wrap.disc-cols > * { grid-column: 2; }
.wrap.disc-cols > .section-title, .wrap.disc-cols > .section-intro, .wrap.disc-cols > .eyebrow { grid-column: 1; }
.wrap.disc-cols > .section-title { position: static; max-width: 14ch; font-size: var(--fs-title); }
.wrap.disc-cols > .section-intro { max-width: 34ch; }
.wrap.disc-cols > .disc:first-of-type { margin-top: 0; }

.disc { background: transparent; border: 0; border-top: 1px solid var(--plum-line); border-radius: 0; box-shadow: none; padding: 1.6rem 0 1.8rem; margin: 0; }
.disc + .disc { border-top: 1px solid var(--plum-line); }
.disc > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6rem;
  gap: .4rem 1rem;
  align-items: start;
  cursor: pointer;
  list-style: none;
}
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary:focus-visible { outline: 2px solid var(--ox); outline-offset: 6px; }
.disc-no { display: none; font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); line-height: 1; color: var(--plum); grid-column: 1; grid-row: 1 / span 2; }
.disc > summary > h2, .disc > summary > h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-block); line-height: 1.15; letter-spacing: 0; color: var(--plum); margin: 0; grid-column: 1; grid-row: 1; }
/* The part a scanner actually reads. It is a step above body, because it is
   the claim rather than the support for it. */
.disc-short { grid-column: 1; grid-row: 2; margin: .5rem 0 0; font-family: var(--sans); font-size: var(--fs-3); font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--ink); }
/* Names what sits behind the summary rather than inviting a click. */
.disc-cue { grid-column: 1; grid-row: 3; margin: .55rem 0 0; font-size: var(--fs-1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); }
.disc-mark { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; width: 1.5rem; height: 1.5rem; flex: none; color: var(--ink-soft); transition: transform .2s ease; }
/* The chevron holds the narrow column on its own and everything else in the
   summary holds the wide one. Without the first rule a child the component did
   not anticipate is placed automatically, and the buying page's price line
   landed in the 1.6rem chevron track and wrapped one word to a line. Saqib
   found this on how-firms-buy.html on 20 September 2026. */
.disc > summary > * { grid-column: 1; }
.disc > summary > .disc-mark { grid-column: 2; }
/* Three of the stages on the buying page carry a price. It rides in the
   summary rather than in the body, so what a stage costs is on the page
   whether a reader opens it or not, on its own row under the short line, with
   the cue dropping below it. */
.disc > summary > .fee { grid-row: 3; margin: .55rem 0 0; font-family: var(--sans); font-weight: 500; font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
.disc > summary > .fee ~ .disc-cue { grid-row: 4; }
.disc > summary:hover .disc-cue, .disc > summary:hover .disc-mark { color: var(--plum); }
.disc[open] > summary .disc-mark { transform: rotate(180deg); }
.disc-body { grid-column: 1; padding: 1.2rem 0 0; }
.disc-body > :last-child { margin-bottom: 0; }
.disc-body p { color: var(--ink-soft); max-width: 62ch; margin: 0 0 1em; }
html.js:not(.disc-ready) .disc[open] > .disc-body { display: none; }

/* The in-place fold. A bold summary line with the chevron, for where a card or
   a section states its position and folds the elaboration where it stands. The
   entries above fold whole items, this folds the tail of one. Ships with the
   open attribute like every details element, and script.js closes it. */
.fold { margin: 0 0 .8em; }
.fold > summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--plum); display: inline-flex; align-items: center; gap: .5rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-top: -.2rem; }
.fold[open] > summary::after { transform: rotate(225deg); margin-top: .15rem; }
.fold > summary:hover { color: var(--plum-deep); }
.fold > summary:focus-visible { outline: 2px solid var(--ox); outline-offset: 4px; }
.fold-body > :first-child { margin-top: .9rem; }
html.js:not(.disc-ready) .fold[open] > .fold-body { display: none; }

/* ---------------------------------------------------------------------------
   The questions a role asks, two boxes to a row on a wide screen.
   --------------------------------------------------------------------------- */
.wrap.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem clamp(1.2rem, 2.4vw, 1.8rem); }
.wrap.role-grid > .section-title, .wrap.role-grid > .section-intro { grid-column: 1 / -1; }
.wrap.role-grid > .section-intro { margin-top: .6rem; margin-bottom: 0; }
.role-q { background: #fff; border: 1px solid var(--rule); border-top: 5px solid var(--blue); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); padding: 1.2rem clamp(1.1rem, 2.4vw, 1.6rem) 1.3rem; display: flex; flex-direction: column; }
.role-q h3 { font-family: var(--serif); font-size: var(--fs-3); font-weight: 400; line-height: 1.16; letter-spacing: 0; color: var(--blue); margin: 0 0 .5rem; }
.role-q p { color: var(--ink-soft); margin: 0 0 .8em; }
.role-q p:last-child { margin: 0; }
.role-q .role-go { margin: auto 0 0; padding-top: .6rem; font-weight: 600; color: var(--ink); }
.role-q .role-go a { color: var(--plum); }
.role-note { color: var(--ink-soft); font-size: var(--fs-2); max-width: 64ch; margin: 0 0 1.4rem; }

/* ---------------------------------------------------------------------------
   The reading aside. The insight articles are the best writing on the site and
   they were reachable only from a list, so an article about file drift never
   appeared beside the passage about supervision. This puts one next to the
   paragraph it belongs to, at the weight of a marginal note rather than of a
   second call to action.
   --------------------------------------------------------------------------- */
.reading { background: var(--plum-wash); border: 1px solid var(--plum-line); border-left: 4px solid var(--plum); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); padding: .9rem 1.1rem; margin: 1.5rem 0 1.7rem; max-width: 58ch; }
.reading-kind { display: block; font-size: var(--fs-1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .25rem; }
.reading a { font-family: var(--serif); font-size: var(--fs-3); font-weight: 400; line-height: 1.28; letter-spacing: 0; color: var(--ink); border-bottom: 1px solid var(--blue-line); }
.reading a:hover, .reading a:focus-visible { color: var(--plum); border-bottom-color: var(--plum); }
.reading p { font-size: var(--fs-2); color: var(--ink-soft); margin: .35rem 0 0; }

/* The standfirst that opens several inner pages. Two pages carry a deeper
   space under it, which is set in their own style block. */
.lead-note { max-width: 68ch; margin-bottom: 2.4rem; }
.lead-note p { margin: 0; color: var(--ink-soft); font-size: var(--fs-2); }
.lead-note p + p { margin-top: 1em; }

/* The Cyber Essentials mark on the security page. It floats beside the prose
   on a wide screen and sits above it on a narrow one, because a badge that
   pushes the first paragraph off the fold reads as the point of the section
   rather than as evidence for it. The link goes to the certificate on the
   IASME register, which is the only reason a badge on a supplier's website is
   worth anything. */
.cert-mark { float: right; display: block; width: 132px; margin: .1rem 0 1rem 1.6rem; text-decoration: none; }
.cert-mark img { display: block; width: 132px; height: auto; }
.cert-mark span { display: block; margin-top: .45rem; font-size: var(--fs-1); line-height: 1.3; color: var(--ink-soft); text-align: center; }
.cert-mark:hover span, .cert-mark:focus-visible span { color: var(--ox); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Tables. The rule sits on the row rather than on every cell, so a table reads
   as a table in a document rather than as a grid of boxes.
   --------------------------------------------------------------------------- */
.ptable-wrap { overflow-x: auto; margin: 1.4em 0; }
.ptable { border-collapse: collapse; width: 100%; font-size: var(--fs-2); }
.ptable tr { border-bottom: 1px solid var(--rule); }
.ptable th { font-weight: 600; text-align: left; }
.ptable th, .ptable td { padding: .55em .8em .55em 0; vertical-align: top; }

/* ---------------------------------------------------------------------------
   Forms. The enquiry on the contact page and the contract diary that sits on
   both product pages and the buying page share one set of controls, so a
   visitor meets the same fields wherever they decide to write to us.
   --------------------------------------------------------------------------- */
.form-block { background: var(--parchment); border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(1.3rem, 3vw, 1.9rem); }
.form-block--plain { background: var(--paper); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(1rem, 2.4vw, 1.5rem); margin: 0 0 1.3rem; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: flex-end;
  min-height: calc(var(--fs-1) * 1.13 * 2.3);
}
.field input, .field select {
  font: 400 var(--fs-2) var(--sans); color: var(--ink); background: #fff;
  border: 1px solid var(--rule); border-radius: var(--r-control); padding: .6rem .72rem;
  width: 100%; min-width: 0; box-sizing: border-box; line-height: 1.4;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2355534b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 11px 7px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--ox); outline-offset: 1px; border-color: var(--ox); }
.field-hint { font-size: var(--fs-1); color: var(--ink-soft); }
/* The honeypot. A visitor never sees it and never tabs into it, and a machine
   filling every field in the form gives itself away by completing it. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: .9rem 1.4rem; flex-wrap: wrap; }
.form-note { font-size: var(--fs-1); color: var(--ink-soft); max-width: 48ch; margin: 0; }

/* The contract diary. Most firms are mid contract at any moment, so the page
   that asks every reader to book a review is asking most of them for something
   they cannot give. This asks for the one date that decides when they can. */
.diary {
  border-top: 1px solid var(--rule); padding-top: 1.7rem;
  margin: clamp(1.8rem, 3.4vh, 2.6rem) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start;
}
.diary h2, .diary h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 .7rem; }
.diary p { color: var(--ink-soft); margin: 0 0 1em; max-width: 46ch; }
.diary p:last-child { margin-bottom: 0; }
.diary .diary-when { font-size: var(--fs-1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem; }
/* A SENTENCE THAT FOLLOWS A BOX STANDS CLEAR OF IT. The note pointing at the
   comparison page sat eighteen pixels under the reminder form. The box carries
   a border and a fill, so an eye reads the distance from the border rather
   than from the last word inside it. */
.diary + .section-intro { margin-top: 2.4rem; }

/* The two closing blocks on the thank you pages. */
.next { border-top: 2px solid var(--ink); padding: 1.8rem 0 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); gap: 1rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.next h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); line-height: 1.2; margin: 0; }
.next p { color: var(--ink-soft); max-width: 62ch; margin: 0 0 1em; }
.next p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Articles and the pieces that follow one
   --------------------------------------------------------------------------- */
.article .wrap { padding-top: clamp(2rem, 5vh, 3.5rem); }
.article-layout { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.article-meta { border-top: 2px solid var(--ink); padding-top: 1.2rem; position: sticky; top: 90px; align-self: start; }
.article-stand { font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.35; margin: 0 0 1.2rem; }
.article-date { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.article-body { max-width: 66ch; }
.article-body p { margin: 0 0 1.4em; }
.article-body h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); line-height: 1.2; margin: 2em 0 .7em; letter-spacing: -0.01em; }
.article-body > p:first-child::first-letter {
  font-family: var(--serif); font-size: 3.4em; float: left; line-height: .82;
  padding: .06em .12em 0 0; color: var(--green-deep);
}
/* A grid track is sized min-width auto by default, so a wide table inside the
   reading column pushes the track past the viewport and takes the page with
   it. Min-width zero lets the table scroll inside its own box. */
.article-layout > *, .pol-layout > * { min-width: 0; }
/* The rail on the legal page. It holds a plain statement of what the document
   is and an index of the documents that share the page, which is the
   navigation problem that page actually has. */
.article-index { border-top: 1px solid var(--rule); margin: 1.4rem 0 1.2rem; padding-top: .9rem; }
.article-index-title { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .55rem; }
.article-index ul { list-style: none; margin: 0; padding: 0; }
.article-index li { margin: 0; }
.article-index a { display: block; font-size: var(--fs-1); line-height: 1.5; padding: .28rem 0; color: var(--ink-soft); border: 0; }
.article-index a:hover { color: var(--ox); }
.article-index a[aria-current="location"] { color: var(--ink); font-weight: 600; }

/* A reading aside sitting inside an article. The article's own paragraph and
   link rules match its children at the same weight as the component's, and
   the component is set out above the article rules here, so the two it has to
   win are named. The paragraph keeps the aside's tight top margin instead of
   the article paragraph's spacing, and the link keeps the article link's
   colour, which is how both have always drawn. */
.article-body .reading p { margin: .35rem 0 0; }
.article-body .reading a { color: var(--plum); border-bottom-color: var(--plum-line); }

.related { border-top: 1px solid var(--rule); padding: clamp(1.8rem, 3.4vh, 2.6rem) 0; }
.related-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); margin: 0 0 1.6rem; }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.related-list a { font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.3; border-top: 1px solid var(--rule); padding-top: .8rem; display: block; }
.related-list a:hover { color: var(--ox); }

/* ---------------------------------------------------------------------------
   Policies. The index pairs a standing statement with a column of cards, and
   an individual policy uses the article layout the insight pieces already use,
   so there is one two column mechanism on the site rather than two.
   --------------------------------------------------------------------------- */
/* The one section carrying this class also carries .section, which sets the
   band's height, so only the tint belongs here. */
.pol-section { background: var(--parchment); }
.pol-layout { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-bottom: clamp(2rem, 5vh, 3.4rem); }
.pol-statement { border-top: 2px solid var(--ink); padding-top: 1.2rem; position: sticky; top: 90px; align-self: start; }
.pol-statement p { margin: 0 0 1.1em; color: var(--ink-soft); font-size: var(--fs-2); }
.pol-statement p:first-child { font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.35; color: var(--ink); }
.pol-statement-more { font-size: var(--fs-1); }
.pol-statement-more a { color: var(--ox); border-bottom: 1px solid rgba(140, 59, 52, .35); }
.pol-grid { display: grid; gap: 1.2rem; }
.pol-card { background: #fff; border: 1px solid var(--rule); border-left: 5px solid var(--blue); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); padding: clamp(1.3rem, 3vw, 1.9rem); }
.pol-card h3, .pol-card h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -0.01em; }
.pol-card h3 a, .pol-card h2 a { border: 0; }
.pol-card h3 a:hover, .pol-card h2 a:hover { color: var(--ox); }
.pol-card-meta { font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .9rem; }
.pol-card > p { color: var(--ink-soft); margin: 0 0 1.3rem; max-width: 62ch; }
.pol-card-act { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
/* The outlined download control. It reads as a button and is quieter than the
   filled one, so the page's one loud action stays the client account review. */
.pol-dl {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font-weight: 600; font-size: var(--fs-2); padding: .62em 1.2em; border-radius: var(--r-control);
  border: 2px solid var(--blue); color: var(--ink); background: transparent; border-radius: 50px;
  transition: background .18s ease, color .18s ease;
}
.pol-dl, p a.pol-dl, .article-body a.pol-dl { border-bottom: 2px solid var(--blue); color: var(--ink); }
.pol-dl:hover, p a.pol-dl:hover, .article-body a.pol-dl:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
.dl-mark { width: 1.15em; height: 1.15em; flex: none; }
.dl-btn { margin: 0 0 1.5rem; }
/* An individual policy. The rail carries the standfirst, the download and the
   document particulars, and the prose sits in the reading column beside it. */
.article.policy .article-body > h2:first-child { margin-top: 0; }
.article.policy .article-body h2 {
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.25;
  margin: 2.2em 0 .6em; letter-spacing: -0.01em;
}
.article.policy .article-body ul, .article.policy .article-body ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.article.policy .article-body li { margin: 0 0 .5em; }
.article.policy .article-body ol { counter-reset: none; }
.policy-note {
  border-left: 3px solid var(--ox); padding: .1rem 0 .1rem 1.1rem;
  color: var(--ink-soft); margin: 0 0 1.4em;
}
.policy-facts { margin: 0 0 1.4rem; font-size: var(--fs-1); }
.policy-facts dt { letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .1rem; }
.policy-facts dd { margin: 0 0 .8rem; color: var(--ink); line-height: 1.45; }
.policy-end { border-top: 1px solid var(--rule); margin-top: 2.6rem; padding-top: 1.6rem; }
.policy-end p { color: var(--ink-soft); }
.policy-end .dl-btn { margin: 0; }

/* ---------------------------------------------------------------------------
   Consent. The one control that has to stay over the content, because consent
   has to be withdrawable from any page. It is a bar at the foot of the window,
   one line of text on the left and the two decisions on the right at equal
   weight, with Settings as a text control between them and the policy link and
   the categories folding out below when Settings is pressed.

   Equal weight matters beyond appearance, because a reject that is visually
   smaller than an accept is the shape a regulator reads as steering the
   choice, and the two are identical.
   --------------------------------------------------------------------------- */
.cookie-panel {
  position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; z-index: 130;
  width: auto;
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--green-deep); color: var(--on-green);
  border: 1px solid rgba(229, 163, 60, .4);
  border-radius: var(--r-control);
  box-shadow: var(--sh-overlay);
  padding: .85rem 1.1rem .9rem;
  display: none;
}
.cookie-panel.is-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1.6rem; align-items: center; }
.cookie-panel h2 { font-family: var(--serif); font-size: var(--fs-2); line-height: 1.18; color: var(--on-green); margin: 0; grid-column: 1; }
.cookie-panel p { font-size: var(--fs-1); color: rgba(243, 241, 233, .78); margin: 0 0 .9em; line-height: 1.55; }
.cookie-panel > p, .cookie-panel > p:last-child { grid-column: 1; margin: 0; }
.cookie-panel > p:last-child a { font-size: var(--fs-1); }
.cookie-actions { display: flex; align-items: center; gap: 10px; margin: 0; grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr 1fr; }
.cookie-btn {
  font-size: var(--fs-2); font-weight: 600; padding: .8em 1.2em; border-radius: var(--r-control);
  border: 1px solid var(--ox); background: var(--ox); color: var(--paper); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  display: flex; align-items: center; justify-content: center;
  min-height: 4.4em; text-align: center;
}
.cookie-btn.ghost { background: transparent; color: var(--on-green); border-color: rgba(243, 241, 233, .45); }
.cookie-btn:hover { background: var(--on-green); color: var(--green-deep); border-color: var(--on-green); }
.cookie-actions .cookie-btn { min-height: 0; padding: .6em 1.1em; white-space: nowrap; }
.cookie-actions .cookie-opt { display: inline; background: none; border: 0; color: rgba(243, 241, 233, .85); text-decoration: underline; text-underline-offset: .18em; padding: .4em .3em; font-weight: 500; }
.cookie-actions .cookie-opt:hover { color: #fff; background: none; }
.cookie-opt { display: block; grid-column: 1 / -1; }
/* The categories sit behind the settings control at every width, which is what
   keeps the bar small enough to stay out of the way. Reopening it from the
   footer link is a deliberate visit to the settings, and the script expands it
   for that case. */
.cookie-panel .cookie-cat, .cookie-panel .cookie-save { display: none; grid-column: 1 / -1; }
.cookie-panel.is-expanded .cookie-cat { display: grid; }
.cookie-panel.is-expanded .cookie-save { display: block; }
.cookie-panel.is-expanded .cookie-actions { grid-row: 1 / span 3; }
.cookie-cat {
  border-top: 1px solid rgba(243, 241, 233, .16); padding: 1.1rem 0;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center;
}
.cookie-cat h3 { font-family: var(--serif); font-size: var(--fs-3); margin: 0; color: var(--on-green); }
.cookie-cat p { grid-column: 1 / -1; margin: 0; }
.cookie-state { font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; color: #e5a33c; }
.cookie-control { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; }
.cookie-onoff { font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: rgba(243, 241, 233, .7); }
.cookie-switch {
  width: 52px; height: 28px; border-radius: 999px; border: 1px solid rgba(243, 241, 233, .3);
  background: rgba(243, 241, 233, .18); position: relative; cursor: pointer; padding: 0; flex: none;
  transition: background .2s ease, border-color .2s ease;
}
.cookie-switch[aria-pressed="true"] { background: #e5a33c; border-color: #e5a33c; }
.cookie-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .2s ease;
}
.cookie-switch[aria-pressed="true"] .knob { transform: translateX(24px); }
.cookie-save { margin-top: 1rem; }
.cookie-link { color: #e5a33c; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   The footer. Every page the header no longer lists stands here in five
   columns, two on a tablet and one on a phone, above the legal bar, with the
   facet and the strapline on one line.
   --------------------------------------------------------------------------- */
.site-footer { background: var(--hero-bg); color: rgba(251, 250, 247, .75); font-size: var(--fs-1); }
.footer-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem 2rem; padding-top: 2.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule-dark); }
/* Each column is a disclosure. On a wide screen it stands open and reads as
   the plain column it always was, so the summary carries no marker, takes no
   pointer and cannot be mistaken for a control. The .8rem under the heading is
   the heading's old margin plus the column's old gap, which is the distance
   the links sat at before the markup changed on 20 September 2026. */
.footer-col { display: block; }
.footer-head { display: block; list-style: none; pointer-events: none; cursor: default; font-family: var(--serif); font-size: var(--fs-2); color: rgba(251, 250, 247, .92); margin: 0 0 .8rem; }
.footer-head::-webkit-details-marker { display: none; }
.footer-col > nav { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.footer-col a { color: rgba(251, 250, 247, .75); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.footer-col a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.footer-brandline { flex-basis: 100%; display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; }
.footer-brandline svg { display: block; flex: none; }
.footer-brandline .footer-strap { flex-basis: auto; margin: 0; }
.footer-strap { flex-basis: 100%; font-family: var(--sans); font-style: normal; font-size: var(--fs-2); color: rgba(251, 250, 247, .9); margin: 0 0 .4rem; }
.footer-legalbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 2rem; padding-bottom: 2rem; align-items: center; }
.footer-copy { margin: 0; }
/* The copyright line is a paragraph, so its links took the accent meant for a
   paper ground and sat on the ink of the footer at 2.17 to 1, carrying both a
   border and an underline. On Saqib's instruction of 20 September 2026 the
   telephone number and the company particulars lose the underline and the
   border and are set in the line's own colour at weight 600, which reaches 9.4
   to 1. The underline arrives on hover and on focus, where a reader is asking
   what is a link and what is not. */
.footer-copy a { color: rgba(251, 250, 247, .75); font-weight: 600; text-decoration: none; border-bottom: 0; }
.footer-copy a:hover, .footer-copy a:focus-visible { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.footer-social { display: flex; gap: .9rem; margin-left: auto; }
.footer-social a:hover { color: var(--paper); }
.footer-social a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; color: var(--paper); }

/* ---------------------------------------------------------------------------
   The reveal. The page ships readable and the animation is added to it, rather
   than the page being hidden until a script arrives to show it. The hidden
   starting state hangs off the js class, which the inline script in the head
   of every page sets once scripting has proved itself, and which that same
   script takes off again if script.js never loads. So a reader with scripting
   switched off, blocked by a proxy or broken by a failed request meets the
   whole page, and a crawler that runs no script indexes the whole page.
   --------------------------------------------------------------------------- */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* The cascading panels of the spatial design are switched off, since the
   Forepoint layout scrolls as one page. The stack survives as plain sections
   because the three pages still carry the markup. */
.stack { position: relative; }
.stack .panel, .stack .panel--paper, .stack .panel--first, .stack .panel--last { position: static; top: auto; border-radius: 0; box-shadow: none; }
.stack .panel { overflow: visible; }
.stack .panel--paper { background: var(--paper); }

/* ===========================================================================
   THE SPATIAL LAYER
   Added 1 August 2026 and confined to the three pages that carry
   class="spatial" on the body, being the home page, the platform page and the
   assistant page. Nothing here reaches the other pages.

   The fault it answers. The container was fixed, so it drew the same 1197
   pixels of content at every desktop width from 1280 to 2560. On the worst
   band the prose occupied about fifteen per cent of the display.

   The composition rule the rest of this block follows. A band that has a real
   second element, being a screenshot, a form, a card row or a claims list,
   takes the full container. A band that is a heading and a paragraph is set as
   one column at its own reading measure, at the page's shared left edge, under
   a hairline that crosses the whole container. Space to the right of a
   paragraph is left as space. Nothing has been invented to occupy it.
   =========================================================================== */
body.spatial {
  /* The container tracks the viewport once the viewport passes about 1455 and
     stops at 1880, so the widest screens are not asked to draw a two thousand
     pixel screenshot. Below that point the value is the old one, so every
     phone width is untouched. */
  --wrap: clamp(1280px, 88vw, 1880px);

  /* Three display sizes that hold the site's existing values to about 1455 and
     then grow with the container to about 1920, where they stop. The outer
     clamp is the one already in the file, so a handset meets the same size it
     met before. */
  --fs-display: clamp(2.3rem, 1.35rem + 4.1vw, max(4.06rem, min(.82rem + 3.57vw, 5.1rem)));
  --fs-title:   clamp(1.9rem, 1.2rem + 3vw,    max(2.9rem,  min(1.22rem + 1.85vw, 3.44rem)));
  --fs-sub:     clamp(1.5rem, 1.05rem + 1.9vw, max(2.08rem, min(.144rem + 2.13vw, 2.7rem)));

  --band-gap: clamp(2rem, 4.4vw, 4.5rem);
  --accent-rule: rgba(140, 59, 52, .45);
}
/* the headline sizes, applied by name rather than by moving a step of the scale */
.spatial .hero-title { font-size: var(--fs-display); max-width: 20ch; }
.spatial .page-head h1 { font-size: var(--fs-display); max-width: 22ch; }
.spatial .section-title, .spatial .about-title, .spatial .contact-title { font-size: var(--fs-title); }
.spatial .shot-lead h3, .spatial .choose-card h3, .spatial .diary h2,
.spatial .cap h2, .spatial .disc > summary > h3 { font-size: var(--fs-sub); }
.spatial .about-quote { font-size: var(--fs-sub); line-height: 1.22; }
/* Vertical room, so each idea arrives on its own. */
.spatial section.insights, .spatial .about, .spatial .assess-cta,
.spatial .contact {
  padding-top: clamp(2rem, 5.4vh, 5rem);
  padding-bottom: clamp(2rem, 5.4vh, 5rem);
}
/* The header is set over the page rather than in it, so anything at the top of
   a page has to clear it on its own. The rule above was reading the window
   height, and on a phone 5.4 of a hundred parts of 844 pixels is 46, which is
   less than the 82 the header occupies, so the eyebrow and the headline sat
   behind the wordmark. Saqib found this on bracton-cms.html on 20 September
   2026. The page head now keeps a fixed floor that clears the header at every
   window size, the home hero keeping its own larger opening. */
.spatial .page-head { padding-top: 6.5rem; padding-bottom: clamp(2rem, 5.4vh, 5rem); }
/* Thin accent rules where the page was drawing a grey line. The dividers only.
   The frames, the form borders, the table rows and the footer keep the grey. */
.spatial .cta-rule, .spatial .diary, .spatial .disc, .spatial .disc + .disc,
.spatial .cap { border-top-color: var(--accent-rule); }
.spatial .hero { border-bottom-color: var(--accent-rule); }
/* Full width blocks with a rounder corner, which is the one thing taken from
   the reference that is not spatial. */
.spatial .shot-frame { border-radius: var(--r-frame); }
/* measures that were reading long once the tracks grew */
.spatial .insight-item p { max-width: 62ch; }
.spatial .lede-pair .illus { margin-bottom: 2.8rem; }
.spatial .choose-grid { display: grid; grid-template-columns: 1fr 1fr; }
.spatial .choose-card { border-top-color: var(--blue); }

/* ===========================================================================
   THE MEDIA QUERIES, gathered in width order. The widest gate first, so a
   narrower screen reads every gate above its own and the last one wins.
   =========================================================================== */

/* The primary navigation folds into the menu button below this width, where
   the row would crowd the brand or wrap onto two lines. Without scripting the
   links sit under the brand as a wrapped row and the button that cannot work
   is taken away. */
@media (max-width: 1280px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; padding: .8rem 1.2rem 1.2rem;
  }
  body.nav-open .nav { display: flex; }
  body.dark-head .nav { background: var(--hero-bg); border-bottom-color: rgba(255,255,255,.15); }
  .nav-toggle { display: flex; }
  .nav a { text-align: left; justify-content: flex-start; }
  .nav .nav-cta { align-self: flex-start; margin: .4rem 0 0 .8em; }
  .no-js .nav { display: flex; position: static; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; background: none; border-bottom: 0; padding: .2rem 0 0; margin-left: -.8em; }
  .no-js .header-inner { flex-wrap: wrap; }
  .no-js .nav-toggle { display: none; }
}

/* Below the point where a wide crop can still be read, the picture element
   swaps to a crop taken from the application at phone width. That crop is
   shown at phone size rather than stretched, so its text lands between 13 and
   15 pixels instead of the 4 pixels a shrunken desktop screen produced. */
@media (max-width: 1099px) {
  .shot-figure { max-width: 394px; }
  .shot-frame img { aspect-ratio: 350 / 500; }
  .shot-cap { margin-inline: 0; max-width: 394px; }
  .shot-motion-what { max-width: 394px; }
}

@media (max-width: 960px) {
  .hero-inner, .about-grid, .assess-cta-inner, .contact-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .ins-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-meta { position: static; }
  .related-list { grid-template-columns: 1fr; }
  .pol-layout { grid-template-columns: 1fr; }
  .pol-statement { position: static; }
  .article-index { display: none; }
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choose-grid, .spatial .choose-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .shot-lead { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .next { grid-template-columns: minmax(0, 1fr); }
  .topline { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .diary { grid-template-columns: minmax(0, 1fr); }
  .about-line { grid-template-columns: 1fr; }
  .page-head .topline > div + div { grid-template-columns: 1fr; }
  .page-head .lede { grid-row: auto; max-width: 62ch; }
  .page-head .claims, .page-head .topline-act { grid-column: 1; }
  .wrap.disc-cols { grid-template-columns: 1fr; }
  .wrap.disc-cols > *, .wrap.disc-cols > .disc, .wrap.disc-cols > .reading { grid-column: 1; }
  .wrap.disc-cols > .section-title { position: static; max-width: 26ch; }
}

@media (max-width: 760px) {
  /* On a phone the consent bar runs to the edges as a sheet across the foot of
     the screen, because a floating card with margins wastes width a handset
     has none of. */
  .cookie-panel {
    bottom: 0; max-height: 84vh;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: var(--r-frame) var(--r-frame) 0 0;
    box-shadow: var(--sh-overlay-up);
  }
  .cookie-panel.is-open { grid-template-columns: 1fr; }
  .cookie-panel > p:first-of-type { margin-bottom: .9rem; }
  .cookie-actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: .5rem; }
  .cookie-btn { flex: 1 1 auto; text-align: center; padding: .72em .9em; }
  .wrap.role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .hero-actions, .topline-act { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero-ghost { margin-left: 0; }
  .hero-inner { padding-bottom: 3.4rem; }
  .photo--article { --mark-size: 32px; --mark-inset: 12px; }
  .podcast-inner { grid-template-columns: 1fr; }
  .podcast-cover { width: 180px; height: 180px; }

  /* The footer map folds. Each column becomes a row a thumb can hit, the
     heading on the left and a chevron on the right that turns when the row
     opens, with a hairline between rows and the links indented beneath.
     script.js closes the rows at this width and leaves them open above it. */
  .footer-map { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-col { border-top: 1px solid var(--rule-dark); }
  .footer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 44px; margin: 0; pointer-events: auto; cursor: pointer;
  }
  .footer-head::after {
    content: ""; flex: none; width: .5rem; height: .5rem;
    border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translate(-.1em, -.1em); transition: transform .2s ease;
  }
  .footer-col[open] > .footer-head::after { transform: rotate(225deg) translate(-.1em, -.1em); }
  .footer-col > nav { padding: .2rem 0 1rem 1rem; }
}

@media (max-width: 620px) {
  .pager { gap: .5rem 1rem; }
  .pager-count { width: 100%; }
  .cert-mark { float: none; margin: 0 auto 1.4rem; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .footer-map { grid-template-columns: minmax(0, 1fr); }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
}

/* On the narrowest handsets the crop is pulled out to the edge of the page,
   which is the difference between the smaller labels reading at 11 pixels and
   at 12. The pull is the wrap's own padding rather than a viewport unit, so it
   cannot start a sideways scroll. */
@media (max-width: 430px) {
  .shot-figure { max-width: none; margin-inline: calc(-1 * clamp(1.2rem, 4vw, 2.6rem)); }
  .shot-cap { max-width: none; margin-inline: 0; padding-inline: clamp(1.2rem, 4vw, 2.6rem); }
  .shot-motion-what { max-width: none; padding-inline: clamp(1.2rem, 4vw, 2.6rem); }
  .spatial .shot-frame { border-radius: 0; }
  /* inside a boxed row the screen stays within the box, 21 September 2026 */
  .shot-block .shot-figure { margin-inline: 0; }
  .shot-block .shot-cap, .shot-block .shot-motion-what { padding-inline: 0; }
  .spatial .shot-block .shot-frame { border-radius: 14px; }
}

/* Two columns only where two columns fit. This gate sits after the stack
   above, so left ungated it would override the stack on handsets and the
   headline track would resolve to zero width. */
@media (min-width: 961px) {
  .spatial .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); }
}

/* ---------------------------------------------------------------------------
   THE REFLOWS AND THE SPLIT, held back to 1140 so that everything at 1280 and
   below keeps the arrangement it has and only the wide screens are recomposed.
   An editorial block divides into a heading column and a reading column, and
   the heading holds on screen while its own section scrolls, so a reader
   always knows which argument the prose belongs to. The offset clears the
   header set over the page.
   --------------------------------------------------------------------------- */
@media (min-width: 1140px) {
  /* The note under the two routes closes the band across the whole width once
     there is width for it, on its own rule rather than at a reading measure. */
  .spatial .choose-note {
    border-top: 1px solid rgba(243, 241, 233, .3);
    padding-top: 1.4rem; margin: 0; max-width: none;
  }

  /* Who designed it. The prose and the pull quote change places, so the
     reading text starts at the page's own left edge instead of a thousand
     pixels to the right of it, and the quote takes the room it can use. */
  .spatial .about-grid {
    grid-template-columns: minmax(0, 62ch) minmax(0, 34rem);
    justify-content: space-between; column-gap: var(--band-gap); align-items: start;
  }
  .spatial .about-main { grid-column: 1; grid-row: 1; }
  .spatial .about-main p { max-width: none; }

  /* The contract diary, which was the worst band on the three pages. The prose
     takes the left edge at its full measure and the form takes the right, so
     the band spans the page on two real things. */
  .spatial .diary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 62ch);
    column-gap: clamp(1.4rem, 3vw, 2.8rem);
  }
  .spatial .diary p { max-width: none; }

  /* The four capabilities on the assistant page. The numeral keeps the margin,
     the heading and the prose share one reading measure at the page's left
     edge, and the room to the right takes a drawing of what the chapter says,
     spanning the chapter's rows and level with the heading. */
  .spatial .cap { grid-template-columns: 3.4rem minmax(0, 62ch) minmax(0, 1fr); }
  .spatial .cap > div { display: contents; }
  .spatial .cap > div > h2, .spatial .cap > div > p { grid-column: 2; }
  .spatial .cap > .cap-fig { grid-column: 3; grid-row: 1 / span 8; align-self: start; margin: 0; padding-left: clamp(1.4rem, 3.4vw, 3.2rem); }
  .spatial .cap > .cap-fig img { width: 100%; height: auto; display: block; }

  /* The standfirst on the assistant page beside the drawing of what the
     assistant reaches. */
  .spatial .lede-pair {
    display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr);
    column-gap: var(--band-gap); align-items: start;
    margin-bottom: clamp(2rem, 4vh, 3.2rem);
  }
  .spatial .lede-pair .lead-note { max-width: none; margin-bottom: 0; }
  .spatial .lede-pair .illus { margin-bottom: 0; }

  .prose-pair {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 62ch);
    column-gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start;
  }
  .prose-pair > .section-title { position: sticky; top: 5.4rem; }
  .prose-pair .lead-note p, .prose-pair .pair-body p { max-width: 62ch; }

  .scene {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 62ch);
    column-gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start;
  }
  .scene > .scene-head { position: sticky; top: 5.4rem; }
  .scene-head h2 { margin-bottom: 0; }

  .stage > h2, .rv > h2 { position: sticky; top: 5.4rem; }
  .stage-no, .rv-no { position: sticky; top: 5.7rem; }
  .shot-lead h3 { position: sticky; top: 5.4rem; }

  /* The contract diary form shares the 62ch right hand track the stage bodies
     use, so its edges line up with the text above and below it, and the
     diary's own text pins like every other split heading column. */
  .diary { grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); column-gap: clamp(1.4rem, 3vw, 2.8rem); }
  .diary > div:first-child { position: sticky; top: 5.4rem; }

  /* The two bands put back into two columns. They were collapsed to a single
     column when the container was narrow, because the text began 687 pixels
     right of everything else. The container now reaches 1797, so both columns
     can be genuinely occupied. The heading column is the wider of the two,
     since a display sized heading needs the room and a reading measure does
     not. */
  .assess-cta-inner, .contact-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .assess-cta-inner > *, .contact-grid > * { max-width: none; }
  .assess-cta-side p, .contact-side p { max-width: 46ch; }
}

@media (min-width: 1281px) { .nav { align-items: center; } }

/* Keyed to the pointer rather than the width. The footer links sat at 31 by
   20, and a phone held sideways is 850 or more pixels wide, so a width
   breakpoint left them small in landscape. The type does not move, the box
   around it grows to the 44 a thumb needs. */
@media (pointer: coarse) {
  .footer-social a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
  .footer-social { margin-inline-end: -12px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .scene-link, .more-link, .hero-ghost { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Nothing moves for a reader who has asked for stillness. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .disc-mark { transition: none; }
  .fold > summary::after { transition: none; }
  .footer-head::after { transition: none; }
}

/* Where the blur is available it settles whatever detail sits under the plate
   behind the photograph mark. The tint stays as it is, because blurring moves
   the detail about without changing how light the corner is underneath. */
@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
  .photo::after {
    -webkit-backdrop-filter: blur(3px) saturate(.85);
    backdrop-filter: blur(3px) saturate(.85);
  }
}

/* The priced stages on the prices page sit inside the two column wrap, so
   each spans both columns and lays its own head and body out on the same
   rhythm as the entries around it: the numeral hidden, the heading and the
   price on the left, the tables on the right. Found 21 September 2026 when
   the heading was crushed into a narrow track. */
.wrap.disc-cols > .stage { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--plum-line); }
.stage-no { display: none; }
.wrap.disc-cols > .stage > .stage-head, .wrap.disc-cols > .stage .fee { grid-column: 1; grid-row: auto; }
.wrap.disc-cols > .stage > .stage-body { grid-column: 2; grid-row: 1 / span 2; }
.stage h2 { font-weight: 400; color: var(--plum); font-size: var(--fs-block); }
@media (max-width: 900px) { .wrap.disc-cols > .stage { grid-template-columns: 1fr; } .wrap.disc-cols > .stage > .stage-head, .wrap.disc-cols > .stage > .stage-body, .wrap.disc-cols > .stage .fee { grid-column: 1; grid-row: auto; } }

/* The two calls in a contact band stand as a row that wraps, with the ghost
   link taking its own line beneath the button on a phone. Found 21 September
   2026 on the integrations and status pages, where the two overlapped. */
.contact-side { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.contact-side p { margin-bottom: .3rem; }
.contact-side .hero-ghost { margin-left: 0; }
.contact-side .btn + .hero-ghost { margin-top: -.2rem; }
/* A price table wider than a phone scrolls inside its wrap rather than
   pushing the page sideways. The wrap already clips, the table is told it
   may be narrower than its wrap. */
.ptable-wrap { max-width: 100%; }
.ptable { min-width: 0; }
.ptable th, .ptable td { overflow-wrap: anywhere; }
/* A long unbroken address in the cookie list on the legal page ran five
   pixels past a phone. Long words in the article body break at need. */
.article-body li, .article-body p, .article-body a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Screens beside their words, 21 September 2026. A product screen sits in one
   half of the row and its heading and paragraph in the other, alternating
   down the page, so a screen takes half the height it took at full width.
   A .crop frame shows one region of the screen rather than the whole, set by
   --fx and --fy (the point of the image held in view, as fractions) and
   --zoom (how far the image is enlarged). --k is the image's aspect divided
   by the frame's, which the top offset needs. The gallery keeps whole
   screens. The other pages carry a strip of three small screens that link to
   the pages holding them.
   --------------------------------------------------------------------------- */
.work-list { gap: clamp(2rem, 5vh, 3.5rem); }
.work-block, .shot-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3.5rem); align-items: center; }
.work-block.flip > .shot-figure, .shot-row.flip > .shot-figure { order: 2; }
.work-block h3 { margin-top: 0; }
.shot-row > .shot-lead { display: block; margin: 0; }
.shot-row > .shot-lead h3 { margin: 0 0 .7rem; }
.shot-row > .shot-figure { min-width: 0; }
.shot-frame.crop { position: relative; aspect-ratio: 5 / 3; --k: 1.0967; }
.shot-frame.crop.wide { aspect-ratio: 3 / 1; --k: 1.974; }
.shot-frame.crop picture { position: absolute; inset: 0; }
.shot-frame.crop img {
  position: absolute; max-width: none; height: auto; aspect-ratio: 2256 / 1484;
  width: calc(var(--zoom, 1.5) * 100%);
  left: calc((100% - var(--zoom, 1.5) * 100%) * var(--fx, .5));
  top: calc((100% - var(--zoom, 1.5) * var(--k) * 100%) * var(--fy, 0));
}
.shot-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.3rem); margin-top: clamp(1.8rem, 3.6vh, 2.6rem); }
.shot-thumb { display: block; color: inherit; min-width: 0; }
.shot-thumb .shot-frame { border-radius: 14px; box-shadow: 0 8px 24px rgba(16, 24, 32, .08); transition: transform .3s ease; }
.shot-thumb:hover .shot-frame { transform: translateY(-3px); }
.shot-thumb span { display: block; margin-top: .55rem; font-size: var(--fs-1); font-weight: 600; color: var(--plum); }
.shot-strip-cap { grid-column: 1 / -1; margin: .2rem 0 0; font-size: var(--fs-2); color: var(--ink-soft); }
.shot-strip-cap b { color: var(--ink); font-weight: 600; }
.shot-strip-cap a { color: var(--plum); border-bottom: 1px solid var(--plum-line); }
@media (max-width: 860px) {
  .work-block, .shot-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .work-block.flip > .shot-figure, .shot-row.flip > .shot-figure { order: 0; }
  .shot-frame.crop.wide { aspect-ratio: 5 / 3; --k: 1.0967; }
}
@media (max-width: 520px) {
  .shot-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .shot-thumb span { font-size: .72rem; }
}

/* ---------------------------------------------------------------------------
   THE FOREPOINT GRAMMAR, 21 September 2026. Saqib's critical review found the
   pages busy and unaligned, several layouts to a page, each with its own type
   size and box. These rules, last in the sheet so that they win, reduce the
   site to Forepoint's grammar: a warm off white ground, one section title
   size, a small serif label in the accent colour above each section, faint
   accent hairlines, two columns on one split for every section including the
   contact block, no bordered cards with coloured bars, no boxed asides, plain
   text navigation with a single pill, and images with rounded corners.
   --------------------------------------------------------------------------- */
:root { --paper: #faf8f5; --rule: #e6e0f2; --plum-line: #d9cfef; --r-card: 18px; }
body { background: var(--paper); }

/* labels, titles and the type scale */
.eyebrow, .page-head .eyebrow, .hero .eyebrow, .podcast-band .eyebrow, .contact .eyebrow {
  font-family: var(--serif); font-size: var(--fs-2); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--plum); margin: 0 0 .9rem;
}
.hero .eyebrow { color: var(--sky); }
.section-title, .spatial .section-title, .wrap.disc-cols > .section-title, .contact-title, .spatial .contact-title, .about-title, .spatial .about-title {
  font-size: var(--fs-5); line-height: 1.1; max-width: 22ch; margin: 0 0 1.2rem;
}
.podcast-title, .spatial .podcast-title { font-size: var(--fs-5); }
.contact-title::before { display: none; }
.section-intro { font-size: var(--fs-3); max-width: 34ch; color: var(--ink); }

/* the boxes go, the colour stays in the headings */
.proof, .choose-card, .role-q, .shot-block, .stage, .rv, .price-card, .plan {
  background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 1.2rem 0 0;
}
.shot-block + .shot-block { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.proof h3, .choose-card h3, .role-q h3, .shot-block h3, .shot-lead h3 { color: var(--plum); font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.2; }
.proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3.5vw, 3.5rem); border: 0; padding: 0; }
.choose-grid, .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3.5vw, 3.5rem); }
.wrap.role-grid { display: grid; }
.wrap.role-grid > .section-title, .wrap.role-grid > .section-intro { grid-column: 1 / -1; }

/* the reading aside becomes a line of text */
.reading { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 1rem 0 1.2rem; max-width: none; }
.reading-kind { display: inline; margin: 0 .4rem 0 0; font-family: var(--serif); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--plum); font-size: var(--fs-2); }
.reading-kind::after { content: ":"; }
.reading a { font-family: var(--sans); font-size: var(--fs-2); color: var(--ink); border-bottom: 1px solid var(--plum-line); }

/* the folds lose their chevron and read as a plum line that opens */
.fold > summary::after { display: none; }
.fold > summary { font-weight: 500; }

/* contact on the same split as every other section */
.contact { border-top: 1px solid var(--rule); }
.contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); }
.contact-grid > * { max-width: none; }
.contact-side p { max-width: 40ch; }

/* one pill in the navigation, the rest plain text */
.nav a.nav-ghost { border: 0; background: none; padding: .4em 0; margin: 0; }
.btn, button.btn, .nav a.nav-cta, .pol-dl, p a.pol-dl, .article-body a.pol-dl { border-width: 1px; font-weight: 500; font-size: var(--fs-2); }

/* images and screens with Forepoint's corner */
.shot-frame, .ins-card img, .photo img, .photo-frame, .podcast-cover img { border-radius: 20px; }
.shot-thumb .shot-frame { border-radius: 14px; }

@media (max-width: 860px) {
  .proof-grid, .choose-grid, .role-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
.demo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3.5vw, 3.5rem) !important; }
@media (max-width: 860px) { .demo-list { grid-template-columns: minmax(0, 1fr); } }
/* nothing pins while the page scrolls, 21 September 2026, after pinned headings
   stacked on top of one another on the security and buying pages */
.prose-pair > .section-title, .scene > .scene-head, .stage > h2, .rv > h2, .stage-no, .rv-no, .shot-lead h3, .diary > div:first-child, .article-meta, .pol-statement { position: static; }

/* Saqib's second round, 22 September 2026: the trade mark larger and closer,
   entries in two columns under a full width title so the left column is not
   left empty, tighter section spacing, and the founder's words beside the
   photograph rather than beneath it. */
.brand .tm { font-size: .8rem; margin-left: 1px; margin-top: -8px; }
.section { padding: clamp(1.8rem, 3.6vh, 2.8rem) 0; }
.section-title, .spatial .section-title, .wrap.disc-cols > .section-title { margin-bottom: 1rem; }
.wrap.disc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); row-gap: 0; }
.wrap.disc-cols > * { grid-column: auto; }
.wrap.disc-cols > .section-title, .wrap.disc-cols > .section-intro, .wrap.disc-cols > .eyebrow, .wrap.disc-cols > .reading, .wrap.disc-cols > .lead-note, .wrap.disc-cols > .stage, .wrap.disc-cols > .prose-pair, .wrap.disc-cols > p, .wrap.disc-cols > .fold, .wrap.disc-cols > details:not(.disc) { grid-column: 1 / -1; }
.wrap.disc-cols > .section-intro { max-width: 62ch; }
.disc { padding: 1.1rem 0 1.3rem; }
.wrap.disc-cols > .disc { align-self: start; }
.topline.with-photo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
.topline.with-photo > div:first-child { display: contents; }
.topline.with-photo > div:first-child > .eyebrow, .topline.with-photo > div:first-child > h1 { grid-column: 1 / -1; }
.topline.with-photo .founder { grid-column: 1; margin: .4rem 0 0; }
.topline.with-photo .founder img { width: 100%; height: auto; border-radius: 20px; display: block; }
.topline.with-photo > div:last-child { grid-column: 2; padding-top: .6rem; }
@media (max-width: 860px) {
  .wrap.disc-cols { grid-template-columns: minmax(0, 1fr); }
  .topline.with-photo { grid-template-columns: minmax(0, 1fr); }
  .topline.with-photo .founder, .topline.with-photo > div:last-child { grid-column: 1; }
}
.page-head .topline.with-photo { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.page-head .topline.with-photo > div + div { display: block; grid-column: 2; border-top: 0; padding-top: .3rem; margin-top: 0; }
.page-head .topline.with-photo .claims, .page-head .topline.with-photo .topline-act { grid-column: auto; }
.page-head .topline.with-photo .lede { max-width: 40ch; }
.wrap.disc-cols > .section-title:not(:first-child) { margin-top: 2rem; }
@media (max-width: 860px) { .page-head .topline.with-photo { grid-template-columns: minmax(0, 1fr); } .page-head .topline.with-photo > div + div { grid-column: 1; } }

.cap .cert-mark { float: none; margin: 0 0 1rem; }