/* The short pages, cut to the Legora measure on 11 October 2026 and dressed
   after adliora.com on 13 October 2026.

   This sheet sits on top of styles.css and adds only what the short pages
   need. From adliora.com it takes the structure and the rhythm: the header
   over a dark opening band, a band height on one spacing scale, bands that
   alternate between white and a pale tint, a section heading set beside its
   introduction in two columns, the founder band with the photograph on the
   left, a closing band in two columns, a footer of brand line, columns and
   particulars, and the Ask a question pill. The words, the films, the
   photographs, the palette and the typefaces stay Bracton's. Where Adliora
   uses its navy this sheet uses Counsel Black (--hero-bg), and where Adliora
   uses its pale sky band this sheet uses a pale tint of Chancery Blue. */

body.alt {
  --paper: #ffffff;
  --tint: #eef2f8;
  --band: clamp(3.5rem, 8vw, 6rem);
  --gap-cols: clamp(1.6rem, 4.5vw, 4.5rem);
  --fs-display: clamp(2.5rem, 1.55rem + 3.7vw, 4.6rem);
  --fs-xl: clamp(2.05rem, 1.45rem + 1.9vw, 3.4rem);
  --fs-md: clamp(1.12rem, 1rem + .45vw, 1.42rem);
  background: var(--paper);
}

/* ---------------------------------------------------------------------------
   The header. Adliora keeps its navigation in a row of small sentence case
   links down to tablet width, so the short pages hold the row open from 1100
   pixels rather than folding it into the menu button at 1280.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  body.alt .nav {
    display: flex; position: static; flex-direction: row; align-items: center;
    background: none; border: 0; padding: 0; gap: 0 1.45rem;
  }
  body.alt .nav-toggle { display: none; }
  body.alt .nav a { font-size: .94rem; letter-spacing: .02em; padding: .35em 0; }
  body.alt .nav a.nav-cta { padding: .55em 1.25em; margin-left: .3rem; }
}

/* ---------------------------------------------------------------------------
   The opening band, dark, with the film held low behind it.
   --------------------------------------------------------------------------- */
.alt-hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  background: var(--hero-bg);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.alt-hero .alt-film { position: absolute; inset: 0; z-index: 0; border: 0; border-radius: 0; background: var(--hero-bg); }
.alt-hero .alt-film video {
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
  display: block; opacity: .16;
}
.alt-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16,24,32,.97) 0%, rgba(16,24,32,.92) 55%, rgba(16,24,32,.72) 100%);
}
.alt-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: calc(6.5rem + var(--band) * .4); padding-bottom: var(--band); }
.eyebrow { color: var(--plum-deep); }
.alt-hero .eyebrow, .alt-pagehead .eyebrow { color: var(--lilac); }
.alt-hero h1 {
  font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: 0;
  font-size: var(--fs-display); max-width: 14ch; margin: 0 0 .55em; color: #fff;
}
/* 13 October 2026, Saqib asked for a touch more colour as Forepoint use their reds. He found the
   Ribbon pink salmon and set it aside, so the key phrase of the headline takes a deep red, the darkest
   that still reads at three to one on the dark ground. */
.alt-hero h1 .accent { color: var(--lilac); }
.alt-lead { font-size: var(--fs-md); line-height: 1.5; max-width: 46ch; margin: 0 0 2rem; color: inherit; }
.alt-hero .alt-lead { color: rgba(255,255,255,.86); }

/* The two calls. The first is the filled pill and the second an outlined
   pill beside it, as on adliora.com. */
.alt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 0; }
.alt-actions .hero-ghost {
  margin: 0; display: inline-block; padding: .7em 1.5em; border-radius: 999px;
  font-weight: 500; text-decoration: none; border: 1px solid var(--blue-line); color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.alt-actions .hero-ghost:hover { border-color: var(--plum); color: var(--plum); }
.alt-hero .alt-actions .hero-ghost, .alt-close .alt-actions .hero-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.alt-hero .alt-actions .hero-ghost:hover, .alt-close .alt-actions .hero-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.alt-hero .btn, .alt-close .btn, .alt-pagehead .btn { background: #fff; color: var(--ink); border-color: #fff; }
.alt-hero .btn:hover, .alt-close .btn:hover, .alt-pagehead .btn:hover { background: var(--lilac); border-color: var(--lilac); color: var(--ink); }

/* An inner page head, dark like the opening band, without the film. */
.alt-pagehead { background: var(--hero-bg); color: #fff; padding: calc(6.5rem + var(--band) * .45) 0 var(--band); }
.alt-pagehead h1 { font-family: var(--serif); font-weight: 400; line-height: 1.05; font-size: var(--fs-display); max-width: 18ch; margin: 0 0 .45em; color: #fff; }
.alt-pagehead .alt-lead { color: rgba(255,255,255,.85); max-width: 54ch; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   The bands. Every band carries the same height, and after the opening band
   they alternate between white and the pale tint. The alternation is held at
   no weight through :where, so a band that has to break it says so with
   alt-plain, alt-tint or a ground of its own.
   --------------------------------------------------------------------------- */
.alt-section { padding: var(--band) 0; background: var(--paper); }
main > .alt-section:where(:nth-of-type(odd):not(:first-child)) { background: var(--tint); }
main > .alt-section.alt-plain { background: var(--paper); }
main > .alt-section.alt-tint { background: var(--tint); }
.alt-section .section-title { font-size: var(--fs-xl); line-height: 1.12; max-width: 20ch; margin: 0 0 1.6rem; }
.alt-section .section-title:empty { display: none; }
.alt-intro { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; margin: 0 0 2rem; }

/* The two column statement: the heading on the left and the introduction
   on the right. The eyebrow takes a row of its own above the heading, so
   the introduction starts level with the heading rather than the eyebrow. */
.alt-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  column-gap: var(--gap-cols); align-items: start; margin: 0 0 clamp(2.2rem, 5vw, 3.6rem);
}
.alt-head > div { display: contents; }
.alt-head .eyebrow { grid-column: 1; grid-row: 1; }
.alt-head .section-title { grid-column: 1; grid-row: 2; margin: 0; }
.alt-head .alt-intro { grid-column: 2; grid-row: 2; margin: 0; max-width: 54ch; padding-top: .45em; }

/* the fact row, four short facts in a line, standing as its own band */
.alt-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem var(--gap-cols);
}
.alt-facts li { display: flex; flex-direction: column; gap: .35rem; padding-top: 1.1rem; border-top: 1px solid var(--plum-line); }
.alt-facts strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.alt-facts span { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }

/* film cards */
.alt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.2rem) var(--gap-cols); }
.alt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.4rem, 3vw, 2.6rem); }
.alt-card { display: block; color: inherit; text-decoration: none; }
.alt-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.6rem); line-height: 1.2; margin: 1.2rem 0 .45rem; transition: color .2s ease; }
.alt-card p { margin: 0 0 .7rem; color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }
.alt-card .more-link { color: var(--plum); font-weight: 600; }
.alt-card:hover h3 { color: var(--plum); }
.alt-grid-3 .alt-card { border-top: 1px solid var(--plum-line); padding-top: 1.3rem; }
.alt-grid-3 .alt-card h3 { margin-top: 0; }

.alt-film { border-radius: 12px; overflow: hidden; background: var(--parchment); border: 1px solid var(--rule); }
.alt-film video { display: block; width: 100%; height: auto; aspect-ratio: 2256 / 1484; }

/* a film beside its words, alternating down the platform page */
.alt-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap-cols); align-items: center; }
.alt-split.flip .alt-film { order: 2; }
.alt-split p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; max-width: 60ch; margin: 0 0 1rem; }
.alt-split p:last-child { margin-bottom: 0; }

/* the about page, the photograph on the left at Adliora's proportion */
.alt-split.alt-about { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.alt-split.alt-about .section-title { margin-bottom: 1.2rem; }
.alt-split.alt-about p { font-size: var(--fs-md); line-height: 1.5; }

/* The photographs on these pages carry the facet on its white plate in the
   top right corner, drawn by the .photo::after rule in styles.css, which
   takes its size from these two values. */
.alt-founder-photo, .alt-about .photo { --mark-size: 40px; --mark-inset: 16px; }

/* two tiles, the two products */
.alt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.alt-tile { background: #fff; border: 1px solid var(--rule); border-top: 5px solid var(--blue); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.2rem); }
.alt-tile h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); margin: .3rem 0 .7rem; }
.alt-tile p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 1rem; max-width: 52ch; }

/* numbered steps */
.alt-steps { margin: 0; padding-left: 1.3rem; max-width: 64ch; }
.alt-steps li { margin: 0 0 1rem; line-height: 1.55; color: var(--ink-soft); }
.alt-steps strong { color: var(--ink); font-weight: 600; }

/* the certifications */
.alt-certs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--gap-cols); align-items: start; }
.alt-certs img { display: block; margin-bottom: .9rem; }
.alt-certs p { color: var(--ink-soft); line-height: 1.55; max-width: 52ch; margin: 0; }

/* ---------------------------------------------------------------------------
   The founder band on the home page, the photograph on the left and the
   words on the right, on the founder purple.
   --------------------------------------------------------------------------- */
main > .alt-section.alt-founder { background: var(--plum-deep); color: #fff; }
.alt-founder-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gap-cols); align-items: center; }
.alt-founder-photo { max-width: 460px; border-radius: 20px; }
.alt-founder-photo img { border-radius: 20px; }
.alt-founder .eyebrow { color: var(--lilac); }
.alt-founder blockquote { margin: 0; }
.alt-founder blockquote p { font-family: var(--serif); font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.9rem); line-height: 1.18; margin: 0 0 1.4rem; color: #fff; max-width: 22ch; }
.alt-founder cite { font-style: normal; }
.alt-founder cite a { color: var(--lilac); font-weight: 600; }
.alt-founder cite a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   The closing band, the heading on the left and the words and calls on the
   right, then the footer of brand line, columns and particulars.
   --------------------------------------------------------------------------- */
.alt-close { background: var(--hero-bg); color: #fff; padding: var(--band) 0; }
.alt-close-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.4rem var(--gap-cols); align-items: start; }
.alt-close h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.05; margin: 0; color: #fff; max-width: 14ch; }
.alt-close p { color: rgba(255,255,255,.85); font-size: var(--fs-md); line-height: 1.5; max-width: 46ch; margin: 0 0 1.8rem; }
.alt-close .alt-actions { max-width: none; margin: 0; font-size: var(--fs-2); }

body.alt .site-footer { border-top: 1px solid var(--rule-dark); }
/* 13 October 2026, Saqib: the rule above the brand line matches the text edges rather than the page's
   side padding, so it is drawn as the last row of the columns' grid instead of on the padded block. */
.alt-footer-cols::after { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--rule-dark); margin-top: .4rem; }
.alt-footer-top { padding-top: 2.2rem; padding-bottom: .2rem; }
/* 13 October 2026, Saqib: the brand line sits above the telephone, and the social marks go lower, beneath the particulars. */
.alt-footer-last { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.alt-footer-last .footer-social { margin-left: auto; }
.alt-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.alt-footer-top .footer-brandline { margin: 0; flex-basis: auto; }
.alt-footer-top .footer-social { margin-left: auto; }
/* 13 October 2026, Saqib: the particulars stand as three lines in Adliora's spacing, the telephone first,
   then the registered office, then the copyright and the company number, and the social marks move up
   to the brand line so the Ask a question pill never covers them. The pill also steps aside while the
   footer is in view. */
.alt-footer-particulars { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding-top: 1.2rem; padding-bottom: 2.4rem; line-height: 1.6; border-top: 0; }
.alt-footer-particulars .footer-copy { margin: 0; }
body.foot-in-view .ask-pill { opacity: 0; pointer-events: none; }
.alt-footer-top .brand-word { color: #fff; font-size: clamp(1.7rem, 1.4rem + .8vw, 2.1rem); }
.alt-footer-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gap-cols);
  padding-top: 2rem; padding-bottom: 0;
}
.alt-footer-cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.alt-footer-head { font-size: var(--fs-1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); margin: 0 0 .5rem; }
.alt-footer-cols a { color: rgba(251, 250, 247, .8); font-size: .95rem; }
.alt-footer-cols a:hover, .alt-footer-cols a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .22em; }
body.alt .footer-legalbar { padding-top: 1.6rem; padding-bottom: 2rem; }

/* The Ask a question pill. It opens the enquiry form on the contact page,
   and it stands aside while the cookie panel or the menu is open so the
   two never sit on top of one another. */
.ask-pill {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--plum-deep); color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: .65em 1.15em; font-size: .9rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 6px 20px rgba(16, 24, 32, .3); transition: transform .2s ease, background .2s ease, opacity .25s ease;
}
.ask-pill:hover, .ask-pill:focus-visible { background: var(--plum); transform: translateY(-2px); }
.ask-pill:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.ask-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); flex: none; }
body:has(.cookie-panel.is-open) .ask-pill, body.nav-open .ask-pill { display: none; }
@media print { .ask-pill { display: none; } }
@media (prefers-reduced-motion: reduce) { .ask-pill { transition: none; } .ask-pill:hover { transform: none; } }

/* ---------------------------------------------------------------------------
   The podcast, the latest episode large and the earlier ones as tiles.
   --------------------------------------------------------------------------- */
.alt-pod-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap-cols); align-items: center; }
.alt-pod-photo { margin: 0; }
.alt-pod-photo img { display: block; width: 100%; height: auto; border-radius: 20px; }
.alt-pod-hero h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15; margin: 0 0 .6rem; }
.alt-pod-date { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .9rem; }
.alt-pod-hero p { color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }
.alt-pod-hero audio, .alt-pod-tile audio { display: block; width: 100%; max-width: 420px; margin: 1rem 0; }
.alt-pod-links a { margin-right: 1.2rem; font-weight: 600; color: var(--plum); }
.alt-pod-tiles .alt-card { padding-top: 0; background: #fff; border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; }
.alt-pod-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* 13 October 2026, Saqib: every episode wears its own picture, the one its page and the feed carry, not the show's cover */
.alt-pod-tile .alt-pod-tile-photo { margin: 0; border-radius: 0; }
.alt-pod-tile h3, .alt-pod-tile p, .alt-pod-tile audio { margin-left: 1.3rem; margin-right: 1.3rem; }
.alt-pod-tile h3 { font-size: 1.3rem; margin-top: 1.1rem; }
.alt-pod-tile p:last-of-type { margin-bottom: 0; }
.alt-pod-tile audio { max-width: none; margin: 1rem 1.3rem 1.3rem; width: calc(100% - 2.6rem); }

/* ---------------------------------------------------------------------------
   Tablets and phones. Every two column band stacks, the film behind the
   opening band is dimmed further so no line of it reads through the
   headline, and on a phone the calls take the full measure, as they do on
   adliora.com.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .alt-grid, .alt-grid-3, .alt-two, .alt-certs, .alt-head, .alt-close-inner, .alt-founder-grid, .henry-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the band stands taller and the scene is cropped at the sides, so Henry and the people stay a readable size. */
  .alt-section .henry-walk .henry-wide { display: none; }
  .alt-section .henry-walk .henry-narrow { display: block; aspect-ratio: 560 / 300; height: auto; }
  .alt-section .henry-walk { --mark-size: 24px; --mark-inset: 10px; }
  .alt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-split, .alt-split.alt-about, .alt-pod-hero { grid-template-columns: minmax(0, 1fr); }
  .alt-split.flip .alt-film { order: 0; }
  .alt-head .section-title, .alt-head .alt-intro { grid-column: 1; grid-row: auto; }
  .alt-head .alt-intro { padding-top: 0; margin-top: 1.2rem; }
  .alt-hero { min-height: 0; }
  .alt-hero .alt-film video { object-position: top center; }
  .alt-hero::after { background: rgba(16,24,32,.88); }
  .alt-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-founder-photo { max-width: 360px; }
}
@media (max-width: 560px) {
  .alt-facts { grid-template-columns: minmax(0, 1fr); }
  .alt-hero h1 { font-size: clamp(2.1rem, 8.6vw, 2.6rem); max-width: 17ch; }
  .alt-pagehead h1 { font-size: clamp(2.05rem, 8.4vw, 2.5rem); }
  .alt-hero-inner { padding-top: 7rem; padding-bottom: 3rem; }
  .alt-pagehead { padding-top: 7rem; padding-bottom: 3rem; }
  .alt-hero .alt-actions .btn, .alt-hero .alt-actions .hero-ghost,
  .alt-close .alt-actions .btn, .alt-close .alt-actions .hero-ghost { display: block; width: 100%; text-align: center; padding: .9em 1.2em; }
  .alt-actions { gap: .75rem; }
  body.alt .footer-legalbar { padding-bottom: 5.2rem; }
  .ask-pill { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Henry on the assistant page, 13 October 2026. He walks across the
   full width of the band beneath the heading, past his gown on its stand,
   turning now and then to look at the reader, and each card of his work
   carries one of his pictures on the lilac wash, the brand mark on the
   frame as on every photograph. */
.henry-walk { margin: 0 0 clamp(1.6rem, 4vw, 2.8rem); background: var(--plum-wash); --mark-size: 34px; --mark-inset: 14px; }
.henry-walk img, .henry-walk object { display: block; width: 100%; height: auto; aspect-ratio: 960 / 300; }
.henry-walk .henry-narrow { display: none; }
.henry-text p { margin: 0; }
.henry-pic { --mark-size: 28px; --mark-inset: 10px; }
.henry-pic img { display: block; width: 100%; height: auto; }

/* The follow up line on the enquiry form, 13 October 2026. A person who
   books a demonstration or a free hour agrees to hear from us afterwards. */
.form-consent { display: flex; gap: .7rem; align-items: flex-start; margin: 1.2rem 0 .4rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.form-consent input { margin-top: .3em; width: 1.05em; height: 1.05em; accent-color: var(--plum-deep); flex: none; }

/* The heading line sweeps along the words, starting at the first word,
   running to the end of each line and starting again on the next, and
   ending at the last word. The words are wrapped by script.js and the
   sweep is the .uw rule in styles.css, set here in the site's plum, and
   in lilac on the dark bands. Saqib's instruction of 14 October 2026,
   replacing a block line that only sat beneath the heading's measure. */
main .uw { background-image: linear-gradient(to right, var(--plum-deep), var(--plum-deep)); }
.alt-hero .uw, .alt-pagehead .uw, .alt-close .uw { background-image: linear-gradient(to right, var(--lilac), var(--lilac)); background-size: 0 3px; }
.alt-hero h1:hover .uw, .alt-pagehead h1:hover .uw, .alt-close h2:hover .uw { background-size: 100% 3px; }

/* Fit on phones and tablets, 14 October 2026. Every link and button a
   finger uses is at least 44 pixels tall. Where a larger box would change
   the look, the box grows by padding and the same negative margin, so the
   target is larger and nothing on the page moves. An anchor stops clear of
   the fixed header, and the Ask a question pill stands down on the page
   that carries the enquiry form it opens. */
body.alt main [id] { scroll-margin-top: 90px; }
body:has(form#form) .ask-pill { display: none; }
.site-header .brand { padding-block: 8px; margin-block: -8px; }
.footer-copy a[href^="tel:"] { display: inline-block; padding-block: 15px; margin-block: -15px; }
blockquote cite a { display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (max-width: 900px) {
  .alt-footer-cols > div { gap: 0; }
  .alt-footer-cols a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; margin-inline: -6px; }
  .alt-footer-head { margin-bottom: 0; }
  .ask-pill { min-height: 44px; }
}