/* ============================================================
   ABCJail.com — shared styles. GOV.UK / NHS.uk standard, 2026-07-28.
   Full spec and rationale: /DESIGN.md
   Every colour pairing here carries its measured contrast ratio.
   Square corners, no shadows, underlined links, yellow focus. No inline styles.
   ============================================================ */

/* ---------- Font (self-hosted, variable, latin subset) ----------
   Public Sans: the USWDS typeface. GDS Transport (GOV.UK) and Frutiger (NHS)
   are both licensed and unusable, so this is the closest free equivalent that
   is institutional by origin rather than by imitation. Inter was retired
   2026-07-28: it is the default typeface of every SaaS product and it made the
   site read like one. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/publicsans-var.woff2') format('woff2');
}

/* ---------- Tokens ----------
   Neutrals and status colours are the GOV.UK functional set, which is more
   thoroughly user-tested than anything we would invent. The accent stays
   #065396, the owner's blue, and is reserved for links, call CTAs and the
   brand block. It is deliberately NOT the GOV.UK blue and there is no blue
   masthead: a government-looking bar on a private company implies official
   status, which is the exact deception facilities.html warns readers about. */
:root {
  --action: #065396;         /* links, call CTAs, brand block; on white 7.8:1, white on it 7.8:1 */
  --action-hover: #054A85;   /* white text 9.0:1 */
  --action-active: #033D6E;  /* white text 11.1:1 */
  --action-tint: #E8EEF4;    /* pale block fill; ink text 18.4:1 */
  --on-action: #FFFFFF;
  --visited: #4C2C92;        /* visited links, GOV.UK purple; on white 9.4:1 */

  --ink: #0B0C0C;            /* body and headings, GOV.UK black; on white 20.4:1 */
  --ink-elevated: #1D1F1F;   /* dark button hover; white text 16.4:1 */
  --on-ink: #FFFFFF;
  --on-ink-soft: #B1B4B6;    /* muted text on dark bands; on chrome 8.9:1 */

  --body: #0B0C0C;           /* GDS runs body copy at full black, not grey. 20.4:1 */
  --muted: #505A5F;          /* secondary text only; on white 7.0:1, on soft 6.6:1 */
  --hairline: #B1B4B6;       /* rules and card borders; 2.1:1, DECORATIVE ONLY.
                                Never use it to carry meaning or as an input border. */
  --rule: #0B0C0C;           /* thick section rules and input borders */
  --canvas: #FFFFFF;
  --surface-soft: #F3F2F1;   /* alternating bands, GOV.UK light grey */
  --surface-card: #FFFFFF;
  --chrome: #0B0C0C;         /* dark bands; white text 20.4:1 */
  --chrome-line: #2A2C2C;
  --charcoal: #0B0C0C;
  --alert: #C7300F;          /* errors; on white 5.4:1, on soft band 4.9:1.
                                GOV.UK's #D4351C is 4.3:1 on our grey and fails there. */
  --live: #00703C;           /* open dot and success, GOV.UK green; on white 5.1:1 */
  --focus: #FFDD00;          /* focus only, GOV.UK yellow; ink on it 15.5:1 */

  --font-display: 'Public Sans', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;

  /* GDS discipline: nothing is rounded and nothing floats. Depth comes from
     solid colour blocks and rules, never from a shadow. */
  --radius-pill: 0;
  --radius-card: 0;
  --radius-input: 0;
  --shadow: none;

  --max-width: 1140px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* GOV.UK sets body copy at 19px. That is noticeably larger than the 17px this
   site used and it is the right call for a frightened reader on a phone.
   Line heights are multiples of 5px throughout, per GDS, for vertical rhythm. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 30px;
  color: var(--body);
  background: var(--canvas);
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* Headings are BOLD, not 400. The light display weight was the other half of
   why this read as a SaaS marketing page rather than a public service. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.09;
  color: var(--ink);
}

/* Links are underlined by default. A colour-only link is a link a lot of
   people cannot see, and GDS is unambiguous about this. */
a {
  color: var(--action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--action-hover);
  text-decoration-thickness: 3px;
}

a:visited {
  color: var(--visited);
}

/* The GDS focus state: yellow block, black underline, no outline gap. It is
   the single most useful accessibility feature in the whole system, and it is
   also a strong visual signature. Applies to everything focusable. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid transparent;
  color: var(--ink);
  background-color: var(--focus);
  box-shadow: 0 -2px var(--focus), 0 4px var(--ink);
  text-decoration: none;
}

/* Structural links are not prose links: navigation, buttons and whole-card
   targets carry their own affordance, so they opt out of the underline.
   Everything inside .prose, .accordion__body and form messaging keeps it. */
.wordmark,
.wordmark:visited,
.site-nav a,
.site-nav a:visited,
.mobile-nav a,
.mobile-nav a:visited,
.call-pill,
.call-pill:visited,
.btn-ink,
.btn-ink:visited,
.sticky-call,
.sticky-call:visited,
.service-card,
.service-card:visited,
.footer-col a,
.footer-col a:visited,
.footer-phone,
.footer-phone:visited,
.aside-links a,
.aside-links a:visited,
.quiet-link,
.quiet-link:visited,
.skip-link,
.lang-banner a {
  text-decoration: none;
}

/* Focus must win over each component's own colour rules */
.wordmark:focus,
.site-nav a:focus,
.mobile-nav a:focus,
.call-pill:focus,
.btn-ink:focus,
.sticky-call:focus,
.service-card:focus,
.footer-col a:focus,
.footer-phone:focus,
.aside-links a:focus,
.quiet-link:focus {
  background-color: var(--focus);
  color: var(--ink);
  box-shadow: 0 -2px var(--focus), 0 4px var(--ink);
}

.call-pill:focus svg,
.btn-ink:focus svg,
.sticky-call:focus svg {
  color: var(--ink);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section--compact {
  padding: 40px 0;
}

/* ---------- Buttons ----------
   GOV.UK buttons are solid rectangles with a 2px darker bottom edge that the
   button sinks into when pressed. That edge is the whole affordance: it reads
   as a physical control without any of the soft-shadow floating that made this
   site look like a dashboard. */
.call-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--action);
  color: var(--on-action);
  border: 0;
  border-radius: var(--radius-pill);
  min-height: 56px;
  padding: 0 32px;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--action-active);
}

/* The colour MUST be restated here. The generic `a:hover` rule sets
   color: var(--action-hover), and at (0,1,1) it outranks the single-class
   .call-pill (0,1,0) that carries the white text. Without this line the label
   is repainted the exact blue the background just became: 1.00:1, invisible.
   Any future <a> component that owns its own colour needs the same treatment. */
@media (hover: hover) {
  .call-pill:hover,
  .sticky-call:hover {
    background: var(--action-hover);
    color: var(--on-action);
  }
}

.call-pill:active {
  background: var(--action-active);
  box-shadow: none;
  transform: translateY(2px);
}

/* On dark bands the blue pill loses its edge (2.5:1 vs chrome), so the
   call CTA inverts to a white pill with ink text (19.7:1) */
.cta-band .call-pill,
.aside-cta .call-pill {
  background: var(--surface-card);
  color: var(--ink);
}

@media (hover: hover) {
  .cta-band .call-pill:hover,
  .aside-cta .call-pill:hover {
    background: var(--action-tint);
  }
}

.cta-band .call-pill:active,
.aside-cta .call-pill:active {
  background: var(--hairline);
}

/* Focus & selection */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* On dark bands the ink outline vanishes; use white there */
.cta-band :focus-visible,
.sticky-call:focus-visible,
.aside-cta :focus-visible {
  outline-color: #FFFFFF;
}

::selection {
  background: rgba(6, 83, 150, 0.2);
}

.call-pill .phone-num {
  font-weight: 700;
  font-size: 19px;
}

/* Secondary CTA — ink pill (used for the detainee locator) */
.btn-ink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--charcoal);
  border: 0;
  color: var(--on-ink);
  border-radius: var(--radius-pill);
  min-height: 56px;
  padding: 0 28px;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 0 #000000;
}

@media (hover: hover) {
  .btn-ink:hover { background: var(--ink-elevated); }
}

.btn-ink:active { background: var(--ink-elevated); }

.btn-ink svg { flex-shrink: 0; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.call-pill svg {
  flex-shrink: 0;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  height: 64px;
  display: flex;
  align-items: center;
  position: relative;
}

.site-header .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark svg {
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 600;
}

.site-nav a {
  color: var(--body);
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
}

.site-nav a.nav-es {
  color: var(--ink);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-call {
  height: 44px;
  padding: 0 20px;
  gap: 8px;
  box-shadow: none;
  font-weight: 700;
  font-size: 16px;
}

.hamburger {
  display: none;
  background: none;
  border: 0;
  padding: 16px 14px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.mobile-nav {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  flex-direction: column;
  padding: 8px 24px 16px;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

/* ---------- Hero ---------- */
.hero .container {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 48px;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.open-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--action-tint);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.pulse-dot {
  display: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2s ease infinite;
}

.open-chip.is-open .pulse-dot {
  display: block;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 112, 60, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(0, 112, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 112, 60, 0); }
}

.hero h1 {
  font-size: 48px;
  letter-spacing: -0.01em;
  line-height: 50px;
  max-width: 15ch;
  text-wrap: pretty;
}

.hero .lede {
  font-size: 24px;
  line-height: 35px;
  max-width: 45ch;
}

.quiet-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--body);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
}

.quiet-link:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* Photo card with typographic stand-in until real photos arrive */
.photo-card {
  position: relative;
}

.photo-frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.photo-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-standin {
  width: 100%;
  height: 100%;
  background: var(--action-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-standin::before {
  content: attr(data-mark);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 10vw, 128px);
  letter-spacing: -0.03em;
  color: rgba(6, 83, 150, 0.16); /* brand-glyph tint; decorative, replaced by real photos */
  user-select: none;
}

.badge-card {
  position: absolute;
  left: -16px;
  bottom: 24px;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.badge-card small {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--surface-soft);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 20px 0;
}

.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px;
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.trust-item svg {
  flex-shrink: 0;
}

/* ---------- Agent + steps ---------- */
.split .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.agent-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 420px;
}

/* Component titles (<= 24px) return to 600; only display sizes stay 400 */
.agent-card h2,
.card-title,
.promise-card h2,
.aside-cta h3,
.form-success h3,
.prose h2,
.prose h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.agent-card h2 {
  font-size: 24px;
  line-height: 1.3;
}

.card-title {
  font-size: 24px;
  line-height: 1.3;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.steps h2 {
  font-size: 36px;
  line-height: 1.15;
}

.steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--action-tint);
  color: var(--ink);
  font-weight: 600;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}

.step-body strong {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}

.steps .call-pill {
  align-self: flex-start;
  box-shadow: none;
}

/* ---------- Promise band ---------- */
.promise {
  background: var(--surface-soft);
}

.promise-card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--action-tint);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.promise-card svg {
  flex-shrink: 0;
  color: var(--ink);
}

.promise-card h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.promise-card p {
  max-width: 65ch;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--chrome);
  position: relative;
  overflow: hidden;
}

.cta-band .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.cta-band h2 {
  font-size: 36px;
  line-height: 1.15;
  color: var(--on-ink);
  text-wrap: balance;
}

.cta-band p {
  font-size: 16px;
  color: var(--on-ink-soft);
}

/* ---------- Footer (light, hairline-separated) ---------- */
.site-footer {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-col a,
.footer-col span {
  font-size: 16px;
  color: var(--body);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--ink);
}

.footer-phone {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.footer-phone:hover {
  color: var(--action); /* 7.8:1 on white; call CTA so accent allowed */
}

.footer-legal {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  color: var(--muted);
}

.footer-legal .fine {
  color: var(--muted);
}

/* ---------- Sticky call bar (<1024px) ---------- */
.sticky-call {
  display: none;
}

@media (max-width: 1023px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .sticky-call {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--action);
    color: var(--on-action);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 19px;
    font-weight: 600;
    box-shadow: var(--shadow);
  }

  .sticky-call:active {
    background: var(--action-active);
  }

  .sticky-call .phone-num {
    font-weight: 700;
    font-size: 19px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hero .container,
  .split .container {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 36px;
  }

  /* Hero photo crops wide when stacked */
  .hero .photo-frame {
    aspect-ratio: 16 / 9;
  }

  .hero-note {
    margin-top: 4px;
  }

  .agent-card .photo-frame {
    aspect-ratio: 4 / 3;
  }

  .agent-card {
    max-width: none;
  }

  .site-nav {
    gap: 16px;
  }

  .badge-card {
    left: 16px;
    bottom: 16px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Spanish nav labels are longer and collide with the phone button below
   ~910px, so ES pages hand over to the mobile menu earlier than EN */
@media (max-width: 959px) {
  html[lang="es"] .site-nav {
    display: none;
  }

  html[lang="es"] .hamburger {
    display: flex;
  }
}

@media (max-width: 767px) {
  .site-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

@media (max-width: 639px) {
  .container {
    padding: 0 20px;
  }

  .section {
    padding: 64px 0;
  }

  .section--compact {
    padding: 32px 0;
  }

  .hero h1 {
    font-size: 32px;
  }

  .call-pill:not(.header-call) {
    height: 56px;
    padding: 0 20px;
    font-size: 16px;
    max-width: 100%;
  }

  .call-pill:not(.header-call) .phone-num {
    font-size: 16px;
  }

  .steps h2,
  .cta-band h2 {
    font-size: 27px;
  }

  .trust-strip .container {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-item {
    justify-content: flex-start;
    text-align: left;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .promise-card {
    padding: 24px;
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .footer-brand {
    max-width: 280px;
  }
}

/* Very narrow phones: keep wordmark + full number both visible */
@media (max-width: 419px) {
  .site-header .container {
    padding: 0 12px;
    gap: 8px;
  }

  .wordmark {
    font-size: 19px;
  }

  .header-call {
    height: 44px;
    padding: 0 12px;
    gap: 6px;
    font-size: 16px;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot {
    animation: none;
  }
}

/* ============================================================
   Inner-page components
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--chrome);
  color: var(--on-ink);
  padding: 12px 20px;
  font-weight: 600;
}

/* Language nudge banner (injected by js/main.js for es-locale visitors) */
.lang-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.lang-banner a {
  color: var(--ink); /* ink underlined; accent is reserved for call CTAs */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-banner button {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.skip-link:focus {
  left: 0;
}

/* Page hero — compact, left-aligned, on the soft band so inner pages
   open differently from the canvas (breaks the stacked-card rhythm) */
.page-hero {
  padding: 56px 0;
  background: var(--surface-soft);
}

.page-hero .kicker {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.page-hero h1 {
  font-size: 36px;
  max-width: 22ch;
  text-wrap: pretty;
  margin-bottom: 16px;
}

.page-hero .lede {
  font-size: 19px;
  max-width: 55ch;
  margin-bottom: 28px;
}

.page-hero .call-pill {
  box-shadow: none;
}

/* Article/content prose */
.prose {
  max-width: 65ch;
}

.prose h2 {
  font-size: 24px;
  line-height: 1.2;
  margin: 44px 0 12px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 24px;
  margin: 32px 0 8px;
}

.prose p {
  margin-bottom: 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

.prose .steps ol {
  list-style: none;
  padding-left: 0;
}

.prose strong {
  color: var(--ink);
}

.prose a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin-bottom: 16px;
}

.prose th,
.prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}

.prose th {
  color: var(--ink);
  font-weight: 600;
}

/* Content + aside split */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}

.aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* The one card in the aside: ink call card */
.aside-cta {
  background: var(--chrome);
  border-radius: var(--radius-card);
  padding: 28px 24px;
}

.aside-cta h3 {
  color: var(--on-ink);
  font-size: 24px;
  margin-bottom: 8px;
}

.aside-cta p {
  color: var(--on-ink-soft);
  font-size: 16px;
  margin-bottom: 20px;
}

.aside-cta .call-pill {
  width: 100%;
  justify-content: center;
  box-shadow: none;
  padding: 0 16px;
}

/* Email line under the call CTA. White on --chrome is 20.4:1; underlined
   because it is the only link inside the dark box. */
.aside-cta .aside-alt {
  margin: 16px 0 0;
}

.aside-cta .aside-alt a {
  color: var(--on-ink);
  text-decoration: underline;
}

/* Plain link groups, hairline-separated */
.aside-links {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}

.aside-links h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.aside-links a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 0;
}

/* Same group used as a plain checklist (no links) */
.aside-links span {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: var(--body); /* 6.2:1 on white */
  padding: 6px 0;
}

.aside-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Section head, left-aligned */
.section-title {
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 36px;
  line-height: 1.15;
  margin-bottom: 8px;
}

.section-title p {
  font-size: 19px;
  max-width: 55ch;
}

.section--soft {
  background: var(--surface-soft);
}

.section--raised {
  background: var(--surface-soft); /* ink 18.4:1, body 5.8:1 */
}

/* FAQ accordion — hairline list, instant toggle (no animation by design) */
.accordion {
  max-width: 800px;
}

.accordion__item {
  border-bottom: 1px solid var(--hairline);
}

.accordion__item:first-child {
  border-top: 1px solid var(--hairline);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  padding: 20px 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.accordion__trigger svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.accordion__item.is-open .accordion__trigger svg {
  transform: rotate(180deg);
}

.accordion__content {
  display: none;
}

.accordion__item.is-open .accordion__content {
  display: block;
}

.accordion__body {
  padding: 0 0 20px;
  max-width: 65ch;
}

.accordion__body p {
  margin-bottom: 12px;
}

.accordion__body p:last-child {
  margin-bottom: 0;
}

.accordion__body a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
}

/* Forms */
.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 2px solid var(--rule); /* GDS: heavy black border, not a faint grey box */
  border-radius: var(--radius-input);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--ink); /* 19.7:1 on white */
  background: var(--surface-card);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  border-color: var(--ink);
}

.form-field .is-error,
.form-field input.is-error,
.form-field textarea.is-error {
  border-color: var(--alert);
}

.form-hint {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 6px;
}

.form-error {
  display: none;
  font-size: 16px;
  color: var(--alert);
  margin-top: 6px;
}

/* Consent notice under the phone field. Sits below the input, unlike .form-hint,
   because it describes what happens after you press send, not how to fill it in.
   Same --muted pairing as .form-hint: 7.0:1 on white, 6.6:1 on soft. */
.form-consent {
  font-size: 16px;
  color: var(--muted);
  margin: 8px 0 0;
}

/* Honeypot. Off-screen rather than display:none, which bots check for, and out of
   the tab order and the accessibility tree so no real person can ever reach it.
   autocomplete="off" on the input matters as much as this rule: a browser that
   autofilled this field would silently drop a real family's request. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-field input.is-error ~ .form-error,
.form-field textarea.is-error ~ .form-error,
.form-field select.is-error ~ .form-error {
  display: block;
}

.form-summary {
  display: none;
  border: 1px solid var(--alert);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 16px;
  color: var(--alert);
}

.form-summary.is-visible {
  display: block;
}

.form-summary a {
  color: var(--alert);
  font-weight: 600;
  text-decoration: underline;
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--charcoal);
  color: var(--on-ink);
  border: 0;
  border-radius: var(--radius-pill);
  min-height: 52px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #000000;
}

.form-submit:active {
  background: var(--ink-elevated);
}

.form-success {
  display: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 24px;
}

.form-success.is-visible {
  display: block;
}

.form-success h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

/* Inner-page responsive */
@media (max-width: 1023px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .aside {
    position: static;
  }
}

@media (max-width: 639px) {
  .page-hero {
    padding: 40px 0;
  }

  .page-hero h1 {
    font-size: 27px;
  }

  .section-title h2 {
    font-size: 27px;
  }

  .prose h2 {
    font-size: 21px;
  }
}

/* ============================================================
   Trust layer (reviews, badges, hours, Ric chip, service map)
   ============================================================ */

/* Hero photo is landscape on desktop (documentary crop) */
@media (min-width: 1024px) {
  .hero .photo-frame {
    aspect-ratio: 4 / 3;
  }
}

/* Small reassurance line under a call CTA */
.hours-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted); /* 5.6:1 on white — AA small text */
  margin: 0;
}

.cta-band .hours-line,
.aside-cta .hours-line {
  color: var(--on-ink-soft); /* 8.6:1 on chrome */
}

/* Reassurance line under the primary CTA. No face: we speak as an organization. */
/* Hero intake form: the category standard is that the form IS the hero.
   Four fields only; the full eight-field intake lives on inmate-search.html. */
.hero-form {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow);
  padding: 28px 26px;
}

.hero-form h2 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink); /* 19.7:1 on white */
  margin: 0 0 6px;
}

.hero-form > p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--body); /* 6.2:1 on white */
  margin: 0 0 20px;
}

.hero-form .form-field {
  margin-bottom: 14px;
}

.hero-form .form-field label {
  font-size: 16px;
}

.hero-form .form-submit {
  width: 100%;
  margin-top: 4px;
}

/* Reassurance under the button, not a fake response-time promise */
.hero-form .form-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted); /* 5.6:1 on white — AA small text */
}

.hero-form .form-foot svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* On success the form hides itself; drop its heading too so the panel reads
   as one message. Degrades harmlessly where :has() is unsupported. */
.hero-form:has(.form-success.is-visible) > h2,
.hero-form:has(.form-success.is-visible) > p {
  display: none;
}

.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  color: var(--body); /* 6.2:1 on white */
}

.hero-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted); /* monochrome; accent is reserved for call CTAs */
}

.hero-note strong {
  color: var(--ink);
}

/* Three bond services. Cards are links; the whole card is the target. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
}

.service-card h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink); /* 19.7:1 on white */
}

.service-card p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body); /* 6.2:1 on white */
}

.service-card svg {
  color: var(--muted);
  margin-bottom: 16px;
}

.service-card .service-more {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}

@media (hover: hover) {
  .service-card:hover {
    border-color: var(--ink);
  }

  .service-card:hover .service-more {
    border-bottom-color: var(--ink);
  }
}

.service-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Case walkthrough: a concrete narrative of a real-shaped case. The strongest
   experience signal we can publish without reviews, so it earns its own component. */
.case-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-log li {
  position: relative;
  padding: 0 0 26px 28px;
  border-left: 2px solid var(--hairline);
}

.case-log li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.case-log li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink); /* monochrome; accent stays reserved for call CTAs */
}

.case-log .when {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted); /* 5.6:1 on white — AA small text */
  margin-bottom: 5px;
}

.case-log p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body); /* 6.2:1 on white */
}

.case-log strong {
  color: var(--ink);
}

/* Short message form: the "text us" path. Emails us; we reply from a real number. */
.message-form {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  padding: 28px 24px;
}

.message-form h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

.message-form > p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}

.message-form textarea {
  min-height: 96px;
}

@media (max-width: 899px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* Credential badges: quiet bordered chips, facts only */
.cred-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cred-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink); /* 19.7:1 on white */
}

.cred-badge svg {
  flex-shrink: 0;
  color: var(--muted); /* monochrome; accent is reserved for call CTAs */
}

/* Reviews strip — populated with owner-provided Google reviews at launch */
.reviews {
  background: var(--surface-soft);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.review-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-stars {
  display: flex;
  gap: 3px;
  color: var(--muted); /* monochrome; accent is reserved for call CTAs */
}

.review-card blockquote {
  margin: 0;
  font-size: 16px;
  color: var(--body); /* 6.2:1 on white */
}

.review-card cite {
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.review-card .review-source {
  font-size: 16px;
  color: var(--muted); /* 5.6:1 on white */
}

.reviews-note {
  margin-top: 16px;
  font-size: 16px;
  color: var(--muted);
}

/* Service-area map (facilities): hand-drawn schematic, self-hosted */
.map-panel {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 24px;
  max-width: 640px;
}

.map-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.map-panel figcaption {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
}

/* Warm photo band (how-we-help) */
/* NHS-style photo panel: a real person, with a solid accent block sitting over
   the image carrying one line of copy. This is the component that stops the
   site reading cold. The block is opaque, so the text contrast is against the
   accent (white on #065396, 7.8:1) and never against the photograph. */
.photo-panel {
  position: relative;
  margin: 0;
}

/* 16:9, not 21:9. A wide letterbox band decapitates any portrait-shaped
   composition, and the whole point of this component is faces. */
.photo-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 40%;
}

.photo-panel__box {
  background: var(--action);
  color: var(--on-action);
  padding: 28px 32px;
  max-width: 46ch;
}

.photo-panel__box p {
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
}

.photo-panel__box .small {
  display: block;
  margin-top: 8px;
  font-size: 19px;
  font-weight: 400;
  line-height: 30px;
}

/* On anything desktop-width the block overlaps the photo, NHS-style.
   Below that it stacks underneath, so no text ever sits on the image. */
/* Panel sits TOP-left, not bottom-left. In these compositions the subjects are
   centre and lower, so the top corner is the only reliably empty ground. Check
   any new photo against this before swapping it in. */
@media (min-width: 900px) {
  .photo-panel {
    display: grid;
    grid-template-areas: "stack";
    align-items: start;
  }

  /* the grid child is <picture>, not <img> — assigning the area to the img
     alone silently does nothing and the panel drops above the photo */
  .photo-panel picture,
  .photo-panel > img,
  .photo-panel__box {
    grid-area: stack;
  }

  .photo-panel picture {
    display: block;
  }

  .photo-panel__box {
    margin: 40px 0 0 40px;
    z-index: 1;
  }
}

.photo-banner {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.photo-banner picture {
  display: block;
}

.photo-banner img {
  width: 100%;
  height: auto; /* without this the width/height attrs win and aspect-ratio is ignored */
  aspect-ratio: 16 / 9; /* half these banners now carry faces; 21:9 crops heads */
  object-fit: cover;
}

/* Caption under a banner. Not decoration: the facility pages show the town rather
   than the building, so the caption is what stops the photo implying it is the
   facility, and CC BY-SA requires the credit to be visible. Matches
   .map-panel figcaption. --muted #505A5F on white is 7.0:1, on soft 6.6:1. */
.photo-banner figcaption {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
}

@media (max-width: 767px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .photo-banner img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Print ---------- */
@media print {
  .sticky-call,
  .hamburger,
  .site-nav {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}