/* Computer Angels — shared styles. Plain CSS, no build step. */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #fbed13; /* sampled from the logo so the nav bar bleeds into it */
  --yellow-soft: #fdf8a8;
  --black: #111111;
  --ink: #26272f;
  --slate: #464658;
  --grey: #f4f4f1;
  --line: #e2e2dc;
  --white: #ffffff;
  --wrap: 1120px;
  --display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--yellow); color: var(--black); padding: 8px 12px; z-index: 10; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.08; color: var(--black); margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 6.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 14px; }

/* Buttons */
.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 6px;
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--yellow);
  text-align: center;
}
.btn:hover, .btn:focus-visible { background: var(--slate); border-color: var(--slate); }
.btn.alt { background: var(--yellow); color: var(--black); }
.btn.alt:hover, .btn.alt:focus-visible { background: var(--white); border-color: var(--black); }
.btn.ghost { background: transparent; color: var(--black); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--black); color: var(--yellow); }
.on-black .btn.ghost { color: var(--yellow); border-color: var(--yellow); }
.on-black .btn.ghost:hover, .on-black .btn.ghost:focus-visible { background: var(--yellow); color: var(--black); }

/* Header, laid out like the old site.
   Wide screens: the logo (298x175, shown at natural size) straddles the black bar and the
   yellow nav bar. Its black top is 77px (COMPUTER) and its yellow bottom 98px (ANGELS),
   so the bars are sized to match and the logo's yellow bleeds into the nav bar.
   Narrower: the whole logo sits centred on black, with phone and buttons stacked under it.
   Narrowest: the menu collapses behind a hamburger button. */
.head-wrap { max-width: 1400px; margin: 0 auto; padding: 0 15px; position: relative; }

.top { background: #000; color: var(--white); }
.top .head-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 16px; text-align: center; }
.brand { display: block; width: min(298px, 72vw); line-height: 0; }
.brand img { width: 100%; height: auto; }
.top-phone { font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--white); }
.top-phone a { color: var(--yellow); text-decoration: none; white-space: nowrap; }
.top-phone a:hover { color: var(--white); }
.top-hours { display: block; font-weight: 400; font-size: 0.8rem; color: #cfcfcf; margin-top: 2px; }
.top-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.top-actions a { background: var(--yellow); color: #000; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; padding: 8px 9px; white-space: nowrap; }
.top-actions a:hover, .top-actions a:focus-visible { background: var(--white); }

.nav { background: var(--yellow); }
.nav .head-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-height: 54px; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 38px; padding: 0 10px; background: transparent; border: 1px solid #000; border-radius: 4px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: #000; }
.nav ul { list-style: none; margin: 0; padding: 0 0 8px; display: none; flex-direction: column; flex-basis: 100%; }
.nav.open ul { display: flex; }
.nav a { display: block; padding: 11px 6px; font-weight: 700; font-size: 1.05rem; text-decoration: none; color: #000; white-space: nowrap; border-top: 1px solid rgba(0,0,0,0.12); }
.nav a:hover, .nav a:focus-visible { background: #000; color: var(--yellow); }

/* Menu fits in a row: no hamburger */
@media (min-width: 640px) {
  .nav-toggle { display: none; }
  .nav .head-wrap { justify-content: center; }
  .nav ul, .nav.open ul { display: flex; flex-direction: row; flex-basis: auto; padding: 0; }
  .nav a { padding: 16px 20px; border-top: 0; border-left: 1px solid rgba(0,0,0,0.08); }
  .nav li:last-child a { border-right: 1px solid rgba(0,0,0,0.08); }
}

/* Wide: logo straddles the two bars, as on the old site */
@media (min-width: 1000px) {
  .top .head-wrap { flex-direction: row; justify-content: flex-end; gap: 24px; height: 77px; padding: 0 5px 0 310px; text-align: left; }
  .top .brand { position: absolute; left: 0; top: 0; width: 298px; z-index: 2; }
  .top-phone { margin: 0 auto; font-size: 1.3rem; text-align: center; }
  .top-actions { flex-wrap: nowrap; }
  .nav .head-wrap { justify-content: flex-end; height: 98px; min-height: 0; align-items: flex-start; padding: 0 44px 0 310px; }
  .nav ul, .nav.open ul { height: 74px; }
  .nav a { display: flex; align-items: center; height: 100%; padding: 0 24px; font-size: 1.1rem; }
}

/* Banner video (kept from the old site) */
.banner { background: var(--yellow); border-bottom: 3px solid var(--black); }
.banner video { width: 100%; height: auto; aspect-ratio: 1850 / 376; min-height: 110px; object-fit: cover; }

/* Hero */
.hero { padding: 34px 0 30px; }
.hero p.lead { font-size: 1.15rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.trust { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); min-height: 44px; }
.trust a { font-weight: 700; }

/* Three doors */
.doors { background: var(--grey); padding: 34px 0; }
.door-grid { display: grid; gap: 16px; }
.door { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--black); border-radius: 8px; padding: 20px; text-decoration: none; box-shadow: 5px 5px 0 var(--yellow); }
.door:hover, .door:focus-visible { box-shadow: 5px 5px 0 var(--black); background: var(--yellow-soft); }
.door p { flex: 1; }
.door .go { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Services */
.services { padding: 38px 0; }
.svc-grid { display: grid; gap: 14px; margin-top: 18px; }
.svc { border-left: 6px solid var(--yellow); padding: 4px 0 4px 14px; }
.svc h3 { font-size: 1.15rem; margin-bottom: 4px; }
.svc p { margin: 0; }
.svc a { font-weight: 700; }

/* Guarantee strip */
.strip { background: var(--yellow); border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); padding: 26px 0; }
.strip .wrap { display: grid; gap: 12px; align-items: center; }
.strip h2 { margin: 0; }
.strip p { margin: 0; font-size: 1.05rem; }

/* Where we work */
.zones { padding: 38px 0; }
.zones .wrap { display: grid; gap: 22px; }
.zone-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.zone-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.zone-list .key { flex: none; width: 16px; height: 16px; border: 1px solid var(--black); border-radius: 3px; transform: translateY(2px); }
.zone-list b { white-space: nowrap; }
.z1 { background: #ffe800; } .z2 { background: #e3f1dc; } .z3 { background: #f6e4c8; }
.zones img { border: 2px solid var(--black); border-radius: 8px; width: 100%; max-width: 500px; }
.note { font-size: 0.9rem; color: #55565f; }

/* Visit */
.visit { background: var(--black); color: var(--white); padding: 36px 0; }
.visit h2, .visit h3 { color: var(--yellow); }
.visit .wrap { display: grid; gap: 22px; }
.visit a { color: var(--yellow); }
.visit dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.visit dt { font-weight: 700; } .visit dd { margin: 0; }

/* Footer */
.foot { background: var(--ink); color: #d9d9de; font-size: 0.9rem; padding: 26px 0 34px; }
.foot a { color: var(--white); }
.foot p { margin: 0 0 8px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.foot .areas { color: #b9b9c2; }

@media (min-width: 720px) {
  .wrap { padding: 0 24px; }
  .door-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 32px; }
  .strip .wrap { grid-template-columns: 1fr auto; }
  .zones .wrap { grid-template-columns: 1fr 1fr; align-items: start; }
  .visit .wrap { grid-template-columns: 1fr 1fr 1fr; }
  .hero { padding: 48px 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Inner pages ---------- */
.page-head { background: var(--grey); border-bottom: 1px solid var(--line); padding: 30px 0 24px; }
.page-head h1 { margin-bottom: 8px; }
.page-head p { font-size: 1.12rem; max-width: 60ch; margin: 0; }
.section { padding: 34px 0; }
.section.tint { background: var(--grey); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 8px; }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.two-col { display: grid; gap: 28px; }
.quote { border-left: 6px solid var(--yellow); padding: 6px 0 6px 16px; font-size: 1.15rem; font-style: italic; margin: 22px 0; max-width: 60ch; }
.tick-grid { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.tick-grid li { background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--yellow); border-radius: 6px; padding: 12px 14px; }
.tick-grid b { display: block; }

/* Rates panel */
.rates { border: 2px solid #000; border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: 5px 5px 0 var(--yellow); }
.rates h2 { background: #000; color: var(--yellow); margin: 0; padding: 12px 16px; font-size: 1.5rem; }
.rates table { width: 100%; border-collapse: collapse; }
.rates th, .rates td { text-align: left; padding: 11px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.rates th { font-weight: 400; }
.rates th small { display: block; color: #55565f; font-size: 0.85rem; }
.rates td { font-weight: 700; white-space: nowrap; text-align: right; }
.rates .foot-note { padding: 11px 16px; border-top: 1px solid var(--line); margin: 0; font-size: 0.9rem; color: #55565f; }

/* Contact */
.contact-card dl { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.contact-card dt { font-weight: 700; } .contact-card dd { margin: 0; }
.map { width: 100%; height: 320px; border: 2px solid #000; border-radius: 8px; }
.form { display: grid; gap: 14px; }
.form label { display: block; font-weight: 700; margin-bottom: 4px; }
.form .opt { font-weight: 400; color: #55565f; }
.form input, .form select, .form textarea { width: 100%; font: inherit; padding: 11px 12px; border: 2px solid #000; border-radius: 6px; background: var(--white); color: var(--ink); }
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.form .hp { position: absolute; left: -9999px; }
.form button { font: inherit; cursor: pointer; justify-self: start; }
.form-status { margin: 0; padding: 12px 14px; border-radius: 6px; font-weight: 700; }
.form-status:empty { display: none; }
.form-status.ok { background: #e3f1dc; border: 1px solid #5b8a4a; }
.form-status.err { background: #fde2e0; border: 1px solid #b3261e; }

@media (min-width: 720px) {
  .two-col { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 40px; }
  .tick-grid { grid-template-columns: repeat(2, 1fr); }
  .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* Guardian Angel calculator */
.calc-form { padding: 6px 16px 14px; display: grid; gap: 10px; }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.calc-row label { font-weight: 700; }
.calc-row small { display: block; font-weight: 400; color: #55565f; font-size: 0.85rem; }
.calc-row input { width: 96px; font: inherit; font-weight: 700; text-align: right; padding: 9px 10px; border: 2px solid #000; border-radius: 6px; }
.calc-row input:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.calc .calc-total th, .calc .calc-total td { background: var(--yellow); font-weight: 700; }
.calc .calc-total td { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.prose h3 { margin-top: 20px; }
.callout { border-left: 6px solid var(--yellow); background: var(--grey); padding: 14px 16px; margin: 22px 0; max-width: 60ch; border-radius: 0 6px 6px 0; }
.callout h3 { margin: 0 0 6px; }
.callout p { margin: 0; }

/* Guardian Angel for home */
.ga-home { background: #000; color: var(--white); padding: 38px 0; border-top: 6px solid var(--yellow); border-bottom: 6px solid var(--yellow); }
.ga-home h2 { color: var(--yellow); }
.ga-home a { color: var(--yellow); }
.eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--yellow); margin: 0 0 8px; }
.ga-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.ga-list li { padding-left: 30px; position: relative; }
.ga-list li::before { content: ""; position: absolute; left: 4px; top: 0.35em; width: 12px; height: 7px; border-left: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: rotate(-45deg); }
.ga-price { background: var(--ink); border: 2px solid var(--yellow); border-radius: 8px; padding: 22px; text-align: center; }
.ga-amount { font-family: var(--display); font-size: 4rem; line-height: 1; color: var(--yellow); margin: 0 0 6px; }
.ga-amount span { font-size: 1.4rem; color: var(--white); }
.ga-sub { font-size: 0.92rem; color: #d6d6d6; margin: 0 0 16px; }
.ga-price .btn { display: block; font-size: 1.1rem; margin-bottom: 14px; border-color: var(--yellow); }
.ga-price .ga-sub:last-child { margin-bottom: 0; }

/* Legal pages, misc */
.legal { max-width: 75ch; }
.legal h2 { font-size: 1.5rem; margin-top: 28px; }
.legal h3 { margin-top: 18px; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.rates td a { font-weight: 700; }
.ga-price .btn + .btn { margin-top: -4px; }
.rates .foot-note { display: block; }

/* Accessibility */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid #1a6fe0; outline-offset: 2px; }
.banner { position: relative; }
.banner-toggle { position: absolute; right: 8px; bottom: 8px; font: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 10px; min-height: 28px; background: #000; color: #fff; border: 1px solid #fff; border-radius: 4px; cursor: pointer; opacity: 0.85; }
.banner-toggle:hover, .banner-toggle:focus-visible { opacity: 1; }

/* Home page: Guardian Angel band is always on black */
.ga-home .btn.alt:hover, .ga-home .btn.alt:focus-visible { background: var(--white); }
.calc-cta { padding: 14px 16px; border-top: 1px solid var(--line); }
.calc-cta .btn { display: block; }
@media (min-width: 720px) { .svc-grid.three { grid-template-columns: repeat(3, 1fr); } }

/* Call bar fixed to the bottom of the screen on phones */
.callbar { display: none; }
@media (max-width: 639px) {
  .callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #000; border-top: 2px solid var(--yellow); padding: 8px; gap: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .callbar a { flex: 1; text-align: center; font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 11px 6px; border-radius: 6px; color: var(--yellow); border: 2px solid var(--yellow); white-space: nowrap; }
  .callbar a.call { background: var(--yellow); color: #000; }
  body { padding-bottom: 66px; }
  html { scroll-padding-bottom: 80px; }
}
@media print { .callbar { display: none; } }

/* Postcode checker */
.pc-check { margin: 16px 0; padding: 14px; background: var(--grey); border: 1px solid var(--line); border-radius: 8px; max-width: 420px; }
.pc-check label { display: block; font-weight: 700; margin-bottom: 6px; }
.pc-row { display: flex; gap: 8px; }
.zones .wrap > * { min-width: 0; }
.pc-row input { flex: 1; min-width: 0; width: 100%; font: inherit; text-transform: uppercase; padding: 10px 12px; border: 2px solid #000; border-radius: 6px; background: var(--white); color: var(--ink); }
.pc-row input::placeholder { text-transform: none; color: #6b6c75; }
.pc-row .btn { font: inherit; font-weight: 700; cursor: pointer; padding: 10px 16px; }
.pc-result { margin: 10px 0 0; font-weight: 700; }
.pc-result:empty { display: none; }
.pc-list { margin: 0 0 14px; max-width: 60ch; }
.pc-list summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.pc-list p { font-size: 0.92rem; margin: 8px 0; }

/* Accreditation logos above the footer */
.badges { background: var(--white); border-top: 1px solid var(--line); padding: 18px 0; }
.badges .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 48px; }

/* FAQ */
.faq-sec .prose { max-width: 75ch; }
.faq { border: 1px solid var(--line); border-left: 6px solid var(--yellow); border-radius: 6px; margin: 10px 0; background: var(--white); }
.faq summary { cursor: pointer; font-weight: 700; padding: 13px 14px; }
.faq[open] summary { border-bottom: 1px solid var(--line); }
.faq p { margin: 0; padding: 12px 14px; }

/* ---------- The 404 party ---------- */
.party { position: relative; overflow: hidden; background: #000 radial-gradient(ellipse at 50% 120%, #1c1c3a 0%, #000 65%); color: #fff; min-height: 560px; display: flex; align-items: center; justify-content: center; border-bottom: 6px solid var(--yellow); }
.party canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.party-inner { position: relative; z-index: 2; text-align: center; padding: 28px 22px; margin: 48px 16px; max-width: 720px; background: rgba(0, 0, 0, 0.5); border-radius: 12px; }

.party-lead { font-size: clamp(1.2rem, 3.4vw, 1.7rem); font-weight: 700; margin: 0 0 14px; }
.party-sub { font-size: 1.1rem; margin: 0 0 22px; color: #e6e6e6; }
.party-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.party-actions .btn { font: inherit; font-weight: 700; cursor: pointer; }
.party-actions .btn.ghost { color: var(--yellow); border-color: var(--yellow); }
.party-actions .btn.ghost:hover, .party-actions .btn.ghost:focus-visible { background: var(--yellow); color: #000; }

@media (max-width: 639px) { .party { min-height: 480px; } }
.party h2 { color: var(--yellow); font-size: clamp(2.6rem, 9vw, 5.5rem); margin-bottom: 10px; }
.party[hidden], .crawl-stage[hidden] { display: none; }

/* ---------- The 404 story: text scrolling away into the distance ---------- */
.crawl-stage { position: relative; overflow: hidden; height: 600px; color: var(--yellow); border-bottom: 6px solid var(--yellow); perspective: 340px; perspective-origin: 50% 0;
  background-color: #000;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 31%, #cfd8ff 50%, transparent 51%), radial-gradient(1px 1px at 58% 77%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 69% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 83% 54%, #ffe9c4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 90%, #cfd8ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 76% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 20% 40%, #fff 50%, transparent 51%); }
/* fade the text out as it reaches the far distance */
.crawl-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; background: linear-gradient(#000 12%, rgba(0, 0, 0, 0)); pointer-events: none; z-index: 2; }
.crawl-intro { position: absolute; z-index: 3; left: 0; right: 0; top: 38%; margin: 0; padding: 0 20px; text-align: center; font-size: clamp(1.15rem, 3.2vw, 1.7rem); color: #5fd3f3; opacity: 0; }
.crawl-plane { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: rotateX(24deg); transform-origin: 50% 100%; }
.crawl-text { position: absolute; left: 50%; top: 100%; width: min(84%, 560px); transform: translateX(-50%); font-weight: 700; font-size: clamp(1.25rem, 3.6vw, 1.9rem); line-height: 1.45; text-align: justify; }
.crawl-text p { margin: 0 0 1.1em; }
.crawl-text .crawl-episode { text-align: center; margin-bottom: 0.2em; }
.crawl-text h2 { color: var(--yellow); text-align: center; font-size: 2.1em; margin: 0 0 0.7em; }
.crawl-actions { position: absolute; z-index: 4; left: 0; right: 0; bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.crawl-actions .btn { font: inherit; font-weight: 700; font-size: 0.9rem; padding: 9px 14px; cursor: pointer; color: var(--yellow); border-color: var(--yellow); background: rgba(0, 0, 0, 0.7); }
.crawl-actions .btn:hover, .crawl-actions .btn:focus-visible { background: var(--yellow); color: #000; }
.crawl-stage.run .crawl-intro { animation: crawl-intro 5s ease-in-out both; }
.crawl-stage.run .crawl-text { animation: crawl-roll 58s linear 4.5s infinite; }
.crawl-stage.paused .crawl-intro, .crawl-stage.paused .crawl-text { animation-play-state: paused; }
@keyframes crawl-intro { 0% { opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crawl-roll { from { top: 100%; transform: translate(-50%, 0); } to { top: 0; transform: translate(-50%, -115%); } }
/* Visitors who ask for less motion get the story as ordinary text */
@media (prefers-reduced-motion: reduce) {
  .crawl-stage { height: auto; perspective: none; padding: 40px 0 80px; }
  .crawl-stage::after { display: none; }
  .crawl-intro { position: static; opacity: 1; margin-bottom: 24px; }
  .crawl-plane { position: static; height: auto; transform: none; }
  .crawl-text { position: static; transform: none; margin: 0 auto; }
  .crawl-stage.run .crawl-intro, .crawl-stage.run .crawl-text { animation: none; }
  #crawl-motion { display: none; }
}
.crawl-plane { will-change: transform; }
.crawl-text { will-change: top, transform; -webkit-font-smoothing: antialiased; font-style: normal; font-synthesis: none; }
/* keep the buttons readable while text passes behind them */
.crawl-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(rgba(0, 0, 0, 0), #000 55%); pointer-events: none; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .crawl-stage::before { display: none; } }

/* The Computer Angels wordmark that flies off into the distance before the story */
.crawl-logo { position: absolute; z-index: 3; left: 50%; top: 46%; display: flex; flex-direction: column; text-align: center; font-family: var(--display); line-height: 1; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.crawl-logo .cl-top { display: block; background: #000; color: var(--yellow); padding: 0.14em 0.3em 0; }
.crawl-logo .cl-top span { display: block; font-size: clamp(3rem, 13vw, 7.5rem); letter-spacing: 0.02em; margin-bottom: -0.09em; }
.crawl-logo .cl-bottom { display: block; background: var(--yellow); color: #000; font-size: clamp(4.3rem, 18.6vw, 10.7rem); letter-spacing: 0.02em; padding: 0.04em 0.1em 0.08em; }
.crawl-stage.run .crawl-logo { animation: crawl-logo 8s cubic-bezier(.2, .55, .35, 1) 4.4s both; }
.crawl-stage.paused .crawl-logo { animation-play-state: paused; }
.crawl-stage.run .crawl-text { animation-delay: 9s; }
@keyframes crawl-logo { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.04); } }
@media (prefers-reduced-motion: reduce) {
  .crawl-logo { position: static; transform: none; opacity: 1; margin: 0 auto 28px; width: max-content; font-size: 0.4em; }
  .crawl-logo .cl-top span { font-size: 2.6rem; } .crawl-logo .cl-bottom { font-size: 3.7rem; }
  .crawl-stage.run .crawl-logo { animation: none; }
}

/* Story tuning: logo moves from its first frame; text tapers strongly towards the horizon */
.crawl-stage { perspective: 300px; perspective-origin: 50% 12%; }
.crawl-plane { transform: rotateX(46deg); }
.crawl-text { width: min(94%, 820px); font-size: clamp(1.5rem, 4.4vw, 2.6rem); line-height: 1.5; }
.crawl-stage::after { height: 34%; background: linear-gradient(#000 35%, rgba(0, 0, 0, 0)); }
.crawl-stage.run .crawl-logo { animation: crawl-logo 7s cubic-bezier(.12, .5, .45, 1) 4.4s forwards; }
.crawl-stage.run .crawl-text { animation: crawl-roll 70s linear 8.5s infinite; }
@keyframes crawl-roll { from { top: 100%; transform: translate(-50%, 0); } to { top: 0; transform: translate(-50%, -125%); } }
@media (prefers-reduced-motion: reduce) {
  .crawl-stage { perspective: none; }
  .crawl-plane { transform: none; }
  .crawl-text { width: min(84%, 560px); font-size: clamp(1.25rem, 3.6vw, 1.9rem); }
  .crawl-stage.run .crawl-logo, .crawl-stage.run .crawl-text { animation: none; }
}
.crawl-text .crawl-end { text-align: center; }

/* A denser starfield for the story: 54 small stars on three overlapping repeat sizes, so no pattern shows */
.crawl-stage {
  background-image:
    radial-gradient(1.7px 1.7px at 46.1% 55.0%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 13.7% 89.6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35.7% 65.2%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 51.9% 82.3%, #ffffffcc 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 31.4% 86.9%, #dfe6ff 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 77.6% 47.5%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 1.5% 21.7%, #dfe6ffcc 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 78.3% 52.4%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 98.0% 93.9%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 74.2% 87.5%, #ffffffcc 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 78.0% 55.2%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 95.7% 93.7%, #fff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 44.5% 66.2%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 18.4% 43.6%, #fff 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 98.8% 61.6%, #fff 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 70.8% 29.3%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 91.4% 94.6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 97.6% 86.0%, #dfe6ffcc 50%, transparent 51%),
    radial-gradient(1px 1px at 16.3% 44.9%, #fff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 88.0% 42.8%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 49.7% 46.9%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 81.0% 66.3%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 49.4% 9.2%, #ffeccbaa 50%, transparent 51%),
    radial-gradient(1px 1px at 26.9% 34.0%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 21.8% 33.1%, #ffeccb 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 16.0% 91.6%, #ffeccb 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 95.5% 53.0%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 3.0% 7.2%, #ffeccb 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 48.2% 69.8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 23.7% 72.8%, #cfd8ffcc 50%, transparent 51%),
    radial-gradient(1px 1px at 25.1% 79.0%, #ffffffbb 50%, transparent 51%),
    radial-gradient(1px 1px at 20.1% 92.4%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 61.0% 21.6%, #dfe6ffbb 50%, transparent 51%),
    radial-gradient(1px 1px at 48.2% 25.8%, #ffeccbbb 50%, transparent 51%),
    radial-gradient(1px 1px at 56.6% 8.7%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 13.8% 78.4%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 50.0% 85.7%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 52.1% 31.7%, #dfe6ffbb 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 94.1% 16.6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 83.1% 52.0%, #ffffffcc 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 93.5% 63.9%, #ffeccb 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 68.9% 43.7%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 73.0% 61.1%, #cfd8ffaa 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 84.9% 56.4%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 80.6% 44.1%, #fff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 67.0% 31.3%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 6.4% 37.9%, #ffeccb 50%, transparent 51%),
    radial-gradient(1px 1px at 54.5% 36.2%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 97.1% 1.4%, #cfd8ffcc 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 10.5% 9.3%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 39.3% 11.6%, #cfd8ffcc 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 38.4% 12.3%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 61.8% 88.5%, #ffffffcc 50%, transparent 51%),
    radial-gradient(1px 1px at 8.8% 40.6%, #ffffffcc 50%, transparent 51%);
  background-size:
    383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px, 383px 347px, 521px 463px, 677px 571px;
}
/* Fade the story itself into the distance (rather than laying a dark band over the sky), so stars show right to the top */
.crawl-stage::after { display: none; }
.crawl-plane { -webkit-mask-image: linear-gradient(transparent 4%, #000 46%); mask-image: linear-gradient(transparent 4%, #000 46%); }
@media (prefers-reduced-motion: reduce) { .crawl-plane { -webkit-mask-image: none; mask-image: none; } }

/* ---------- Public Service Announcements ---------- */
.psa-check { display: block; width: 100%; background: #000; }
.psa-brand { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; color: #fff; }
.psa-bars { display: inline-flex; gap: 3px; flex: none; }
.psa-bars span { width: 10px; height: 22px; border: 3px solid #000; box-sizing: border-box; }
.psa-bars span.on { background: #000; }
.psa-bars.small span { width: 7px; height: 15px; border-width: 2px; }
.psa-big { font-family: var(--display); font-size: 1.5rem; line-height: 1.05; }
.psa-btn { display: inline-block; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; padding: 11px 20px; border: 2px solid #000; background: #000; color: var(--yellow); }
.psa-btn:hover, .psa-btn:focus-visible { background: var(--slate); border-color: var(--slate); }
.psa-btn.ghost { background: #fff; color: #000; }
.psa-btn.ghost:hover, .psa-btn.ghost:focus-visible { background: var(--yellow); border-color: #000; }
.psa-x { flex: none; width: 44px; height: 44px; padding: 0; font: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; border: 2px solid var(--yellow); background: #000; color: var(--yellow); }
.psa-x.dark { border-color: #000; background: #fff; color: #000; }
.psa-x:hover, .psa-x:focus-visible { background: var(--yellow); color: #000; }

/* The pop-up card */
.psa-dialog { width: min(800px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto; border: 6px solid #000; background: #fff; color: var(--black); box-shadow: 12px 12px 0 var(--yellow); }
.psa-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.psa-bar { background: #000; color: var(--yellow); padding: 14px 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.psa-bar .psa-brand { margin-bottom: 5px; }
.psa-name { font-family: var(--display); font-size: clamp(1.9rem, 8.6vw, 2.2rem); line-height: 1.04; letter-spacing: 0.02em; }
.psa-tri { flex: none; display: block; }
.psa-body { padding: 18px 18px 20px; display: grid; gap: 16px; }
.psa-headline { margin: 0; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.1; }
.psa-meta { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid #000; }
.psa-cell { padding: 9px 12px; border-left: 3px solid #000; min-width: 0; }
.psa-cell:first-child { border-left: 0; }
.psa-cell:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 3px solid #000; }
.psa-cell.sev { position: relative; background: var(--yellow); padding-right: 48px; }
.psa-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 4px; }
.psa-sevline { display: flex; align-items: center; gap: 10px; }
.psa-info { position: absolute; right: 2px; bottom: 2px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-end; }
.psa-info span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 4px 4px 0; border-radius: 50%; background: #000; color: var(--yellow); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 1.15rem; line-height: 1; }
.psa-info:hover span, .psa-info:focus-visible span { background: var(--slate); }
.psa-para { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.psa-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; border-top: 3px solid #000; padding-top: 14px; }
.psa-updated { font-size: 0.88rem; color: var(--slate); }
.psa-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* The severity legend, laid over the card */
.psa-legend { position: absolute; left: 12px; right: 12px; top: 96px; z-index: 2; background: #fff; border: 5px solid #000; box-shadow: 8px 8px 0 var(--yellow), 0 0 0 100vmax rgba(0, 0, 0, 0.5); }
.psa-legend[hidden] { display: none; }
.psa-legend-bar { background: #000; color: var(--yellow); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.psa-legend-title { font-family: var(--display); font-size: 1.45rem; line-height: 1.05; }
.psa-legend-body { padding: 14px; display: grid; gap: 10px; }
.psa-level { display: flex; align-items: center; gap: 14px; border: 3px solid #000; padding: 10px 12px; }
.psa-level.high { background: var(--yellow); }
.psa-level.moderate { background: var(--yellow-soft); }
.psa-level .psa-bars span { width: 11px; height: 28px; }
.psa-meaning { font-size: 0.95rem; margin-top: 3px; }

/* The strip across the top of the page */
.psa-strip { background: #fff; color: var(--black); border-bottom: 6px solid #000; display: flex; flex-wrap: wrap; align-items: stretch; }
.psa-strip-block { background: #000; color: var(--yellow); padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex: 1 1 100%; }
.psa-strip-name { font-family: var(--display); font-size: 1.3rem; line-height: 1.05; letter-spacing: 0.02em; margin-top: 3px; }
.psa-strip-mid { flex: 1 1 260px; min-width: 0; padding: 10px 14px; display: grid; gap: 8px; align-content: center; }
.psa-strip-head { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.psa-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.psa-tag { display: inline-flex; align-items: center; gap: 7px; border: 2px solid #000; padding: 2px 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; }
.psa-tag.sev { background: var(--yellow); }
.psa-strip-act { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-left: auto; }

@media (min-width: 720px) {
  .psa-bar { padding: 16px 26px 20px; gap: 20px; }
  .psa-name { font-size: 2.75rem; white-space: nowrap; }
  .psa-body { padding: 22px 26px; gap: 18px; }
  .psa-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psa-cell:nth-child(3) { grid-column: auto; border-top: 0; border-left: 3px solid #000; }
  .psa-para { font-size: 1.12rem; }
  .psa-legend { left: 60px; right: 60px; top: 150px; }
  .psa-strip-block { flex: none; padding: 12px 18px; }
  .psa-strip-name { font-size: 1.35rem; max-width: 9em; }
}
@media print { .psa-strip, .psa-dialog { display: none; } }

/* Pause must win over the later "animation:" shorthand rules above, which reset it to running */
.crawl-stage.paused .crawl-intro, .crawl-stage.paused .crawl-logo, .crawl-stage.paused .crawl-text { animation-play-state: paused !important; }

/* Header: the two remote support buttons are the same width (that of the wider one) */
.top-actions { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.top-actions a { text-align: center; }
@media (max-width: 639px) {
  .top-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: 400px; }
  .top-actions a { white-space: normal; display: flex; align-items: center; justify-content: center; }
}
/* Menu row just after the hamburger disappears: slightly tighter so five links always fit */
@media (min-width: 640px) and (max-width: 759px) { .nav a { padding: 16px 12px; } }

/* ---------- Cookie choice ---------- */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #000; color: #fff; border-top: 4px solid var(--yellow); padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; max-width: 70ch; font-size: 0.95rem; line-height: 1.45; }
.cookie-bar a { color: var(--yellow); }
.cookie-btns { display: flex; gap: 10px; flex: none; }
/* Accept and Reject are deliberately identical, so neither is the "easy" choice */
.cookie-btn { font: inherit; font-weight: 700; min-width: 110px; padding: 11px 18px; cursor: pointer; background: var(--yellow); color: #000; border: 2px solid var(--yellow); }
.cookie-btn:hover, .cookie-btn:focus-visible { background: #fff; border-color: #fff; }
@media (max-width: 639px) { .cookie-bar { bottom: calc(68px + env(safe-area-inset-bottom)); padding: 12px 14px; } .cookie-bar p { font-size: 0.88rem; } .cookie-btns { width: 100%; } .cookie-btn { flex: 1; } }
.linklike { font: inherit; color: var(--white); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.linklike:hover { color: var(--yellow); }
.map-wrap { margin-bottom: 14px; }
.map-off { border: 2px solid #000; border-radius: 8px; padding: 16px; background: var(--grey); }
.map-off[hidden] { display: none; }
.map-off p { margin: 0 0 12px; }
.map-off .btn { font: inherit; font-weight: 700; cursor: pointer; }
@media print { .cookie-bar { display: none; } }