@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* 110.dk — one stylesheet for every page. The page is a kept ledger sheet:
   near-white paper, near-black ink, one red margin rule. See DESIGN.md. */


:root {
  --paper: #fbfbf9;
  --paper-deep: #f4f4f1;
  --ink: #141519;
  --ink-soft: rgba(20, 21, 25, 0.6);
  --feint: #dededa;
  --rule: #c73e2c;
  --margin: clamp(1.5rem, 7vw, 6rem);
  --gutter: var(--margin);   /* text sits as far from the rule as the rule sits from the edge */
  --right: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --mono: var(--sans); /* was Fragment Mono; one typeface throughout (Switzer, Matt's NaviWeb pick 23-09) */
}
@supports (color: oklch(50% 0 0)) {
  :root {
    --paper: oklch(98.4% 0.002 95);
    --paper-deep: oklch(96.3% 0.003 95);
    --ink: oklch(17% 0.012 265);
    --ink-soft: oklch(17% 0.012 265 / 0.6);
    --feint: oklch(89% 0.003 95);
    --rule: oklch(55% 0.185 27);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  position: relative;   /* the margin rule spans the whole page and scrolls with it */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
}
::selection { background: rgba(199, 62, 44, 0.16); }   /* a tint, not a block: the red blocks looked goofy on the headline */
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--rule); outline-offset: 3px; }
strong, b { font-weight: 500; color: var(--ink); }
.stop { color: var(--rule); }

/* ---------- the red margin rule ---------- */
.margin-rule {
  /* one line from the top of the page to the bottom, part of the page, not the screen;
     the branch to the button on the contact screen grows out of it */
  position: absolute;
  top: 0; bottom: 0;
  left: var(--margin);
  width: 2px;
  background: var(--rule);
  transform-origin: top;
  z-index: 3;
  pointer-events: none;
}

/* ---------- page frame: everything hangs right of the rule ---------- */
.frame {
  position: relative;
  z-index: 2;
  padding-left: calc(var(--margin) + 2px + var(--gutter));   /* +2px: the rule's own width */
  padding-right: var(--right);
}
header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.5rem, 3.5vh, 2.75rem);
}
.mark { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.mark a { text-decoration: none; }

/* ---------- the login link: quiet, top right, out of the headline's way ---------- */
.login {
  position: fixed;
  top: clamp(1rem, 2.6vh, 1.75rem);
  right: var(--right);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 3.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--feint);
  box-shadow: 0 1px 2px rgba(20, 21, 25, 0.06), 0 8px 24px -12px rgba(20, 21, 25, 0.25);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.login:hover {
  color: var(--ink);
  border-color: rgba(20, 21, 25, 0.28);
  box-shadow: 0 1px 2px rgba(20, 21, 25, 0.08), 0 12px 28px -12px rgba(20, 21, 25, 0.32);
}
.login:focus-visible { outline: 2px solid var(--rule); outline-offset: 3px; }

/* ---------- the language toggle: removed while the page is English only (30-09-2026) ---------- */

/* ---------- the one page: headline left, the field right ---------- */
.split {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* a long rolling word must never widen the page */
}
.left {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-right: 4.5rem;
}
.left h1 { margin: auto 0; }
h1 {
  /* two-column layouts: the column is 50vw minus margin, gutter (both 7vw) and the toggle lane;
     the longest line ("automatiserings") is ~7.6em wide, so the size follows the column */
  font-size: clamp(1.8rem, calc((36vw - 4.5rem) / 7.7), 5.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: min(14ch, 100%);   /* never wider than the column, whatever word is rolling */
  padding: clamp(2rem, 6vh, 4rem) 0;
}
h1 .line { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1 .line.end { display: inline; }
/* the rotating word: a one-line window on a column of words; it is the red thing */
.rotor {
  overflow: hidden;
  /* slack on the left so an optically shifted word is never clipped by the window */
  margin-left: -0.09em;
  padding-left: 0.09em;
  /* exactly one line tall, rows one line apart: the window never overlaps its neighbours,
     and the 1.1 leading leaves room for ascenders and descenders. The top and bottom few
     percent fade out, so a neighbouring word's descender can never show as a sliver. */
  height: 1.08em;   /* Geist's tallest ink (ascender to descender) is 1.06em at this leading */
  color: var(--rule);
}
.rotor.rolling {
  /* only while a roll is in progress: descenders crossing the edges fade instead of being cut */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.rotor .column {
  display: block;
  transition: transform 0.95s cubic-bezier(0.77, 0, 0.175, 1);
}
.rotor .word { display: block; height: 1.08em; white-space: nowrap; }
.rotor { -webkit-user-select: none; user-select: none; }   /* the hidden words in the column would otherwise select and copy */
.right { min-height: 100svh; }
.field {
  /* the whole page is the field; the mask lets it drift into the left half and
     thin out around the headline, so paper and dots meet softly, not at an edge */
  position: absolute;
  inset: 0 0 -55svh 0;   /* overhangs the second screen by half a viewport */
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s var(--ease);
  -webkit-mask-image:
    linear-gradient(to right, transparent 30%, #000 72%),
    radial-gradient(70% 60% at 24% 52%, transparent 0 34%, #000 100%),
    linear-gradient(to bottom, #000 55%, transparent 98%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 30%, #000 72%),
    radial-gradient(70% 60% at 24% 52%, transparent 0 34%, #000 100%),
    linear-gradient(to bottom, #000 55%, transparent 98%);
          mask-composite: intersect;
}
.field.on { opacity: 1; }
.field canvas { display: block; width: 100%; height: 100%; }

/* ---------- the second screen: one line, one button ---------- */
.contact {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.contact-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(2.5rem, 7vh, 4.5rem);
  padding: clamp(3rem, 8vh, 6rem) 0;
  /* span the whole page width, so the line and the button centre under the toggle */
  margin-left: calc(-1 * (var(--margin) + 2px + var(--gutter)));
  margin-right: calc(-1 * var(--right));
}
.say {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* the red rule turns the corner and leads to the button */
.beam-row {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.lead, .lead-spacer { flex: 1; height: 2px; }
.lead { margin-left: var(--margin); }          /* starts on the rule */
.lead-spacer { margin-right: var(--margin); }  /* same on the right, so the button stays centred */
.lead {
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.6s var(--ease);
}
.contact.in .lead { transform: scaleX(1); }

/* the button: an ink pill with a red beam running round it */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam {
  --spin: 7s;
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.4s var(--ease);
  flex: none;
}
.beam:hover, .beam:focus-visible { transform: translateY(-2px); }  /* speed-up is eased in script, so the beam never jumps */
.beam:focus-visible { outline: 2px solid var(--rule); outline-offset: 6px; }
.beam-glow, .beam-ring {
  background: conic-gradient(from var(--a) at 50% 50%, transparent 0 58%, var(--rule) 92%, transparent 100%);
  animation: beam var(--spin) linear infinite;
}
.beam-glow {
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  filter: blur(12px);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}
.beam:hover .beam-glow { opacity: 0.85; }
.beam-ring {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background-color: rgba(20, 21, 25, 0.35);
  box-shadow: 0 10px 30px -18px rgba(20, 21, 25, 0.5);
}
.beam-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.beam-face svg { transition: transform 0.35s var(--ease); }
.beam:hover .beam-face svg { transform: translateX(3px); }
@keyframes beam { to { --a: 360deg; } }

/* ---------- footer ---------- */
footer.site {
  line-height: 2;
  padding-top: 1.25rem;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--feint);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }
/* one dot after every item but the last; inline-block so a link's underline does not run under it */
footer.site > *:not(:last-child)::after { content: '·'; display: inline-block; margin: 0 1em; color: var(--ink-soft); text-decoration: none; }

/* ---------- legal pages ---------- */
.legal main {
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
.legal article { max-width: 40rem; }
.legal h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: none;
}
.legal .updated {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
  margin-bottom: 2.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--feint);
}
.legal h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.5rem;
}
.legal p { margin-bottom: 1rem; max-width: 65ch; }
.legal p:last-child { margin-bottom: 0; }
.legal article a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
}

@media (max-width: 820px) {
  .login { height: 2.75rem; padding: 0 0.6rem; }
  header.site { padding-top: clamp(1.5rem, 3.5vh, 2.75rem); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .left, .right { min-height: 50svh; }
  /* the toggle sits at the top on phones, so the headline starts below it and the
     right-hand lane reserved for it on desktop is not needed */
  .left { padding-top: calc(2.75rem + clamp(1rem, 2.6vh, 1.75rem) + 2rem); padding-right: var(--right); }
  .left h1 { margin: 0; }
  /* phones: sized to the width so "110 løsninger" and the longest rolling word stay on one line */
  h1 { font-size: clamp(1.9rem, 10.3vw, 3.4rem); padding: clamp(1.5rem, 5vh, 3rem) 0; }
  .field {
    inset: 0 0 -16svh 0;   /* a shorter overhang: the dots must be gone before the contact line */
    -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 50%, #000 72%, transparent 98%);
    -webkit-mask-composite: source-over;
            mask-image: linear-gradient(to bottom, transparent 34%, #000 50%, #000 72%, transparent 98%);
            mask-composite: add;
  }
}

/* ---------- leaving for the client login ---------- */
/* The login page loads a background video, and a loading video makes Chrome skip the
   cross-document transition (measured: block the video and it runs). So going that way the site
   fades to the login's own colour instead — dark on desktop, white on phones, matching its
   breakpoint — while the browser loads the page. The navigation is not delayed: the old document
   stays on screen until the new one is ready, which is exactly when the veil is doing its work. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #0a0b0d;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);   /* most of the way dark within ~120ms, before the page swaps */
  pointer-events: none;
}
.veil.on { opacity: 1; }
@media (max-width: 720px) { .veil { background: #ffffff; } }

/* ---------- moving between this site and the client login at /login ---------- */
/* Same origin (the login is proxied under 110.dk), so the two documents can hand over with a
   cross-document view transition instead of a hard cut: paper dissolves into the dark login and
   back. Pure CSS — the login page's CSP allows no scripts. The matching opt-in lives in
   110-books' web/static/style.css; both documents must declare it or nothing happens. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- motion: only when scripts run; the page reads fine without ---------- */
.js .margin-rule { transform: scaleY(0); transition: transform 3.2s var(--ease); }
.js body.loaded .margin-rule { transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .beam-glow, .beam-ring { animation: none; }
  .rotor .column { transition: none; }
  .lead { transition: none; }
  .js .margin-rule, .js .reveal, .field { transition: none; }
  .js .margin-rule, .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ================================================================
   front page v3 draft (30-09-2026): the headline screen now carries a
   subline and the call button; the sections below read as one calm
   column hanging off the margin rule. Body text is 20px for older readers.
   ================================================================ */
header.site { position: relative; z-index: 4; padding-top: clamp(1.5rem, 3.5vh, 2.75rem); }
header.site .mark { line-height: 3.25rem; }
.home .split { min-height: calc(100svh - 5rem); }
.home .left { min-height: calc(100svh - 5rem); }
.home .left .hero { margin: auto 0; padding: clamp(2rem, 6vh, 4rem) 0; }
.home h1 {
  font-size: clamp(2.4rem, calc((36vw - 4.5rem) / 6.4), 5.2rem);
  max-width: 11ch;
  padding: 0;
}
.lead-text {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  max-width: 30ch;
}
.cta-row {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.5rem;
}
.or-call { font-size: 1.25rem; color: var(--ink-soft); }
.placeholder {
  /* a blank Matt still has to fill: visible on purpose */
  color: var(--ink);
  background: rgba(199, 62, 44, 0.12);
  padding: 0 0.25em;
  border-radius: 3px;
}

.sections {
  position: relative;
  z-index: 2;
  font-size: 1.25rem;
  line-height: 1.6;
  padding-top: clamp(3rem, 10vh, 7rem);
}
.block {
  max-width: 38rem;
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  border-top: 1px solid var(--feint);
}
.block h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.block p { max-width: 34em; }
.desk, .steps { list-style: none; }
.desk li { padding: 0.9rem 0; border-bottom: 1px solid var(--feint); }
.desk li:last-child { border-bottom: 0; }
.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.8rem 0 0.8rem 3rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--rule);
}
.home .contact-body { gap: clamp(1.5rem, 4vh, 2.5rem); }
.contact-line { font-size: 1.25rem; }
.contact-line a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.home footer.site { font-size: 0.9rem; }

/* sections rise in as they scroll into view, the same move as the headline */
.js .scroll-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .scroll-in.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .home .split, .home .left { min-height: 0; }
  .home .left { padding-top: 1rem; }
  .home .right { min-height: 32svh; }
  /* phones: the dots live only in the empty band under the call button, never under text */
  .home .field {
    top: auto; bottom: -8svh; height: 40svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 60%, transparent 98%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 60%, transparent 98%);
  }
  .home h1 { font-size: clamp(2.3rem, 11vw, 3.6rem); max-width: none; }
  .sections { padding-top: 1rem; }
  .beam-face { padding: 0.9em 1.3em; }
  .lead { margin-left: calc(var(--margin) + 2px); }
  .lead, .lead-spacer { min-width: 0.75rem; }
}
@media (max-width: 420px) {
  .beam-face { font-size: 1.05rem; padding: 0.85em 1.1em; gap: 0.5em; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scroll-in { transition: none; opacity: 1; transform: none; }
}

/* ================================================================
   front page v4, minimal (30-09-2026): one screen, like the card -
   mark, headline, Matt's breadth line, one button to /call, a quiet footer.
   The v3 section rules above stay until /call lands (it may reuse them).
   ================================================================ */
.home .page { min-height: 100svh; display: flex; flex-direction: column; }
.home .page .hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 4vh, 3rem) 0;
}
.home h1 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 14ch;
  padding: 0;
}
.home .lead-text { max-width: 36ch; }
.home .cta-row { margin-top: clamp(1.75rem, 4.5vh, 2.75rem); }
.home footer.site { font-size: 0.9rem; }
@media (max-width: 820px) {
  .home .page .hero { justify-content: flex-start; padding-top: clamp(1.5rem, 6vh, 4rem); }
  .home h1 { font-size: clamp(2.3rem, 11vw, 3.6rem); max-width: none; }
  /* phones: the footer wraps as a list with gaps, so no line ends on a stray dot */
  .home footer.site { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .home footer.site > *::after { display: none; }
}

/* ================================================================
   front page v5 (01-10-2026, Matt: "a tiny bit longer", the squares back
   and better, both clients shown): first screen as v4, then recent work
   and a closing call. The square field fills the first screen only.
   ================================================================ */
.home .page .hero { min-height: calc(100svh - 5.5rem); flex: none; }
.home main { flex: 1; }

/* the square field: right side of the first screen, clear of the text */
.home .field {
  display: block;
  inset: auto;
  top: 0; right: 0;
  width: 58%;
  height: 100svh;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-composite: intersect;
}

.home .work, .home .close {
  position: relative;
  z-index: 2;
  max-width: 62rem;
  padding: clamp(3rem, 9vh, 6rem) 0;
  border-top: 1px solid var(--feint);
}
.home .kicker {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.home .work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.home .work h3 {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.home .work p, .home .close p {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 34ch;
}
.home .close h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
.home .close p { max-width: 40ch; }

@media (max-width: 820px) {
  .home .page .hero { min-height: calc(100svh - 5rem); }
  /* phones: the squares fill the empty band under the button, never under text */
  .home .field {
    top: 58svh; left: calc(var(--margin) + 2px); right: 0; width: auto; height: 42svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 70%, transparent 100%);
  }
  .home .work-grid { grid-template-columns: minmax(0, 1fr); }
}

/* front page v6 (01-10-2026, Matt): one button only, at the bottom with the call explained;
   "What we can help you with" as a plain list */
.home .help {
  position: relative; z-index: 2;
  max-width: 62rem;
  padding: clamp(3rem, 9vh, 6rem) 0;
  border-top: 1px solid var(--feint);
}
.home .help-list { list-style: none; columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
.home .help-list li {
  break-inside: avoid;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding: 1rem 0 1rem 1.6rem;
  border-bottom: 1px solid var(--feint);
  position: relative;
}
.home .help-list li::before {   /* a short red tick, the margin rule in small */
  content: '';
  position: absolute; left: 0; top: 1.62rem;
  width: 0.7rem; height: 2px;
  background: var(--rule);
}
.home .call-facts { list-style: none; margin: 1.5rem 0 0; }
.home .call-facts li {
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding: 0.2rem 0;
}
.home .close .cta-row { margin-top: clamp(1.75rem, 4.5vh, 2.5rem); }
.home .page .hero { min-height: calc(100svh - 5.5rem); }
@media (max-width: 820px) {
  .home .help-list { columns: 1; }
}

/* v7 (01-10-2026, Matt: "the gradient is too much, overlapping with the text, looks messy"):
   the squares live in the right-hand third only, fading in from its left edge and out at top
   and bottom, so they never sit behind a letter or the Log in button */
.home .field {
  top: 12svh; right: 0;
  width: 40%;
  height: 80svh;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, transparent 0, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, transparent 0, #000 22%, #000 72%, transparent 100%);
          mask-composite: intersect;
}
.home .help-more {
  margin-top: 1.5rem;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  color: var(--ink-soft);
}
@media (max-width: 820px) {
  .home .field {
    top: 62svh; left: calc(var(--margin) + 2px); width: auto; height: 36svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 70%, transparent 100%);
            mask-composite: add;
  }
}

/* v8 (01-10-2026, Matt: the help list "is really asymmetric"): a grid, not text columns, so the
   items sit in equal rows with their hairlines on one line; three across on desktop */
.home .help-list {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3.5vw, 3rem);
  border-top: 1px solid var(--feint);
}
.home .help-list li { padding: 1.1rem 0 1.1rem 1.6rem; }
.home .help-list li::before { top: 1.85rem; }
@media (max-width: 1000px) { .home .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .home .help-list { grid-template-columns: minmax(0, 1fr); } }

/* v9 (02-10-2026, Matt: the glow round the button "gets cut off at the top", still after giving
   the blur more room; his Mac opens links in Safari, which cuts a blur drawn over a moving gradient
   at a straight line). So the glow uses no blur at all: the same moving red gradient on a box 28px
   larger than the button all round, shown through a soft pill-shaped mask - a straight middle part
   that fades out above and below, and two round ends that fade out the same way. It needs the
   glow's height, which the page script writes inline as --gh; a page without that script (for
   now /call) keeps the old blurred glow. */
.beam-glow[style*="--gh"] {   /* only once the page script has measured it */
  --r: calc(var(--gh) / 2);
  --fade: 28px;
  inset: -28px;
  padding: 0;
  filter: none;
  opacity: 0.45;
  border-radius: 0;
  /* three parts that meet without overlapping (an overlap shows as a brighter seam): the middle,
     and two half-discs whose centre is the inner edge (the script keeps --gh a whole even number) */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    radial-gradient(circle var(--r) at 100% 50%, #000 calc(var(--r) - var(--fade)), transparent var(--r)),
    radial-gradient(circle var(--r) at 0% 50%, #000 calc(var(--r) - var(--fade)), transparent var(--r));
  -webkit-mask-size: calc(100% - var(--gh)) 100%, var(--r) 100%, var(--r) 100%;
  -webkit-mask-position: center, left center, right center;
  -webkit-mask-repeat: no-repeat;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    radial-gradient(circle var(--r) at 100% 50%, #000 calc(var(--r) - var(--fade)), transparent var(--r)),
    radial-gradient(circle var(--r) at 0% 50%, #000 calc(var(--r) - var(--fade)), transparent var(--r));
          mask-size: calc(100% - var(--gh)) 100%, var(--r) 100%, var(--r) 100%;
          mask-position: center, left center, right center;
          mask-repeat: no-repeat;
          mask-composite: add;
}
.beam:hover .beam-glow[style*="--gh"] { opacity: 0.65; }