/* ==========================================================================
   COMMERCIAL RENT BAILIFFS LIMITED — design system
   Direction: engraved legal authority. Ink navy · aged brass · paper.
   Type: Fraunces (display) · Archivo (text) · Spline Sans Mono (citations)
   ========================================================================== */

:root {
  --ink: #0a2434;
  --ink-2: #0e2c40;
  --ink-3: #15374f;
  --paper: #f4f7f9;
  --paper-2: #e8eef2;
  --paper-3: #d8e2e9;
  --brass: #006ba6;      /* CRB deep blue: on-paper accents, small text */
  --brass-2: #35aee4;    /* CRB bright blue: on-ink accents */
  --brass-3: #8fcff0;    /* CRB pale blue */
  --logo-blue: #0086cd;  /* the blue of the logo wordmark, used for the top bar */
  --stamp: #0272ae;
  --ink-soft: #475d6d;
  --line: rgba(10, 36, 52, 0.15);
  --line-strong: rgba(10, 36, 52, 0.32);
  --line-light: rgba(244, 247, 249, 0.17);
  --line-light-strong: rgba(244, 247, 249, 0.38);

  /* Form surface. The cards carry the header's grey rather than the ink used
     everywhere else, so a form reads as a sheet to fill in, not a dark panel.
     Every rule inside .form-card draws from these and nothing else, which is
     what makes the surface switchable in one place. */
  --card-bg: color-mix(in srgb, var(--paper) 98%, var(--ink));
  --card-fg: var(--ink);
  --card-muted: var(--ink-soft);
  --card-faint: rgba(10, 36, 52, 0.62);
  --card-line: var(--line);
  --card-line-strong: var(--line-strong);
  --card-input-bg: #ffffff;
  /* --brass, not --brass-2: the bright blue is 2.3:1 on this grey and fails as
     a focus ring. The deep blue is 5.2:1. */
  --card-accent: var(--brass);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "Archivo", "Helvetica Neue", sans-serif;
  --font-mono: "Spline Sans Mono", "SFMono-Regular", Menlo, monospace;

  --size-hero: clamp(2.6rem, 1rem + 6.2vw, 5.9rem);
  --size-h2: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  --size-h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);

  --pad-x: clamp(1.25rem, 4vw, 4rem);
  --max-w: 1240px;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
/* `hidden` has to beat any author `display`, because the UA stylesheet's
   [hidden] rule loses to every author rule no matter how weak. Without this,
   .btn's inline-flex kept the stepper's Back and Submit buttons on screen on
   every step of every form, however faithfully the script set el.hidden. */
[hidden] { display: none !important; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--brass-2); color: var(--ink); }

/* paper grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- utilities ---------- */
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 3000;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex; align-items: center; gap: 0.85rem;
  font-weight: 500;
}
.eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--brass); flex: none; }
.on-ink .eyebrow { color: var(--brass-3); }
.on-ink .eyebrow::before { background: var(--brass-2); }

.display {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
  letter-spacing: -0.015em;
  line-height: 1.04;
}
.display em { font-style: italic; font-weight: 480; color: var(--brass); }
.on-ink .display em { color: var(--brass-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-text);
  font-weight: 640;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-brass { background: linear-gradient(135deg, #0080c4, #00639a); color: #fff; }
.btn-brass:hover { background: #0086cd; color: #fff; }
.btn-ghost-ink { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost-ink:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-ghost-paper { border-color: var(--line-light-strong); color: var(--paper); }
.btn-ghost-paper:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn svg { width: 1em; height: 1em; }

/* ---------- top bar ---------- */
.topbar {
  background: var(--logo-blue);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar .wrap {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 2.4rem; gap: 1rem;
}
.topbar a { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(255,255,255,0.6); }
.topbar a:hover { text-decoration-color: #ffffff; }
.topbar-note { opacity: 1; }
@media (max-width: 720px) {
  .topbar-note { display: none; }
  .topbar .wrap { justify-content: center; }
  /* The note is hidden here, so the email sits alone and centred. At 0.6rem it was
     9.6px and only 11px tall to tap -- too small for what is now the site's main
     contact route. inline-block keeps it on one line with the opening hours. */
  .topbar { font-size: 0.66rem; letter-spacing: 0.08em; }
  .topbar a { display: inline-block; padding: 0.5rem 0.3rem; }
  .header-phone { display: none; }
  .brand-name { font-size: 0.94rem; }
  .brand-seal { width: 2.2rem; height: 2.2rem; }
  .brand-logo { height: 2.1rem; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  /* no backdrop-filter: it would become the containing block for the
     fixed-position mobile nav overlay and clip it to the header box */
  background: color-mix(in srgb, var(--paper) 98%, var(--ink));
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(10, 36, 52, 0.45); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.6rem; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand-logo { height: 2.6rem; width: auto; display: block; }
.site-footer .brand-logo { height: 2.35rem; }
.brand-seal { width: 2.6rem; height: 2.6rem; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.06rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.brand-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 0.28rem;
  white-space: nowrap;
}
@media (max-width: 720px) { .brand-name small { letter-spacing: 0.18em; } }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: 1.5rem; align-items: center; }
.nav a.nav-link {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.nav a.nav-link:hover, .nav a.nav-link[aria-current="page"] { border-bottom-color: var(--brass); }

/* dropdown */
.has-drop { position: relative; }
.has-drop > .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.has-drop > .nav-link::after {
  content: ""; width: 0.42em; height: 0.42em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.drop {
  position: absolute; top: calc(100% + 0.9rem); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 21rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
  box-shadow: 0 30px 60px -20px rgba(10, 36, 52, 0.55);
  border-top: 2px solid var(--brass);
}
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop a {
  display: flex; align-items: baseline; gap: 0.8rem;
  text-decoration: none;
  padding: 0.72rem 0.9rem;
  font-size: 0.92rem; font-weight: 520;
  transition: background 0.15s;
}
.drop a:hover { background: var(--ink-3); }
.drop a .idx {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--brass-2); letter-spacing: 0.08em;
}

.header-cta { display: flex; align-items: center; gap: 1.1rem; }
/* The number is the header's call to action now that the button has gone, so
   it is sized and framed like one rather than sitting as quiet text. */
.header-phone {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; line-height: 1.1;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.header-phone .ico {
  width: 1.5rem; height: 1.5rem; flex: none; color: var(--brass);
}
.header-phone .num {
  display: block; font-weight: 700; font-size: 1.22rem; letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.header-phone small {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 0.58rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--brass);
}
.header-phone:hover { border-color: var(--brass); background: var(--paper-2); color: var(--brass); }
.header-phone:hover small { color: var(--brass); }
/* The header carries the phone number and nothing else. An "Instruct Us"
   button beside it competed with the call for the same click, and for this
   trade a phone call is the higher-intent route — Michael can qualify the job
   in ninety seconds on the phone. The forms are still reached from the hero,
   the CTA bands, the footer and the service pages. */
.header-cta .btn { display: none; }

/* mobile nav */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-strong);
  width: 2.9rem; height: 2.9rem;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  width: 1.3rem; height: 2px; background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -7px; left: 0; translate: 0; }
.nav-toggle span::after { top: 7px; left: 0; translate: 0; }
.nav-open .nav-toggle {
  z-index: 1001; /* stay clickable above the fixed nav overlay */
  border-color: var(--line-light-strong);
}
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before,
.nav-open .nav-toggle span::after { background: var(--paper); }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; top: 0; z-index: -1;
    background: var(--ink); color: var(--paper);
    flex-direction: column; justify-content: flex-start;
    /* The open menu is ~600px tall with both dropdowns showing, which is taller
       than a 320x568 portrait screen and far taller than any phone in landscape.
       Centred flex content that overflows its container cannot be scrolled back
       to, so the first item would simply be unreachable. Scroll instead, and let
       auto margins do the centring while there is still room for it. */
    overflow-y: auto; overscroll-behavior: contain;
    padding: 5.75rem 1.25rem 2.5rem;
    opacity: 0; visibility: hidden; transition: opacity 0.3s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; z-index: 999; }
  .nav > ul { flex-direction: column; gap: 0.4rem; text-align: center; width: 100%; margin-block: auto; }
  .nav a.nav-link { font-size: 1.5rem; font-family: var(--font-display); font-weight: 540; }
  .drop {
    position: static; transform: none; opacity: 1; visibility: visible;
    background: transparent; box-shadow: none; border-top: 0;
    min-width: 0; padding: 0.2rem 0 0.6rem;
  }
  .drop a { justify-content: center; font-size: 1.02rem; padding: 0.45rem; opacity: 0.85; }
  .drop a .idx { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  /* JPEG first as the fallback; the image-set() line below wins wherever
     WebP is supported and cuts this image from 215KB to 104KB. */
  background:
    linear-gradient(96deg, rgba(10, 36, 52, 0.96) 0%, rgba(10, 36, 52, 0.88) 38%, rgba(10, 36, 52, 0.56) 72%, rgba(10, 36, 52, 0.38) 100%),
    url("../img/hero-london.jpg") center 30% / cover no-repeat,
    var(--ink);
  background:
    linear-gradient(96deg, rgba(10, 36, 52, 0.96) 0%, rgba(10, 36, 52, 0.88) 38%, rgba(10, 36, 52, 0.56) 72%, rgba(10, 36, 52, 0.38) 100%),
    image-set(url("../img/hero-london.webp") type("image/webp"),
              url("../img/hero-london.jpg") type("image/jpeg")) center 30% / cover no-repeat,
    var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(90rem 40rem at 85% -20%, rgba(0, 134, 205, 0.12), transparent 60%),
    radial-gradient(60rem 30rem at -10% 110%, rgba(0, 134, 205, 0.07), transparent 55%);
}
.hero .wrap { position: relative; padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(3.5rem, 7vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 3rem; align-items: end; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { font-size: var(--size-hero); margin: 1.6rem 0 1.4rem; max-width: 13ch; }
.hero-sub { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); color: rgba(244, 247, 249, 0.78); max-width: 52ch; }
.hero-sub strong { color: var(--paper); font-weight: 640; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.hero-phone-note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,247,249,0.55); margin-top: 0.9rem; }

.hero-side { display: grid; gap: 0; border: 1px solid var(--line-light); }
.hero-side .cell { padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--line-light); background: rgba(10, 36, 52, 0.55); }
.hero-side .cell:last-child { border-bottom: 0; }
.hero-side .num {
  display: block;
  font-family: var(--font-display); font-weight: 560; font-size: 1.9rem; line-height: 1;
  color: var(--brass-2);
}
.hero-side .lbl { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.45rem; color: rgba(244,247,249,0.65); }

/* statute ticker line under hero */
.statute-line {
  background: rgba(10, 36, 52, 0.62);
  border-top: 1px solid var(--line-light);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 247, 249, 0.5);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.statute-line .wrap { display: flex; gap: 3.5rem; padding-block: 0.85rem; overflow: hidden; }
.statute-line span { flex: none; }
.statute-line em { color: var(--brass-2); font-style: normal; }

/* ---------- sections ---------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-ink { background: var(--ink); color: var(--paper); }
.section-paper2 { background: var(--paper-2); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--size-h2); max-width: 18ch; margin-top: 1.2rem; }
.section-head .aside-note { max-width: 34ch; color: var(--ink-soft); font-size: 0.98rem; padding-bottom: 0.4rem; }
.on-ink .aside-note { color: rgba(244,247,249,0.65); }
@media (max-width: 800px) { .section-head { flex-direction: column; align-items: flex-start; } }

/* ---------- client logo banner ---------- */
.clients { border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.clients .wrap { padding-block: 2.4rem; }
.clients-label {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center; margin-bottom: 1.8rem;
}
.clients-marquee { overflow: hidden; position: relative; }
.clients-marquee::before, .clients-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 1; pointer-events: none;
}
.clients-marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.clients-marquee::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.clients-track { display: flex; gap: 4rem; width: max-content; animation: clients-scroll 38s linear infinite; }
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-track ul { display: flex; gap: 4rem; align-items: center; flex: none; list-style: none; margin: 0; padding: 0; }
.clients-track img {
  display: block; height: 3rem; width: auto; max-width: none;
  filter: grayscale(0.15);
  transition: filter 0.3s ease;
}
.clients-track img.lg-sq { height: 2.75rem; }
.clients-track img.lg-tall { height: 3.5rem; }
.clients-track img.lg-xtall { height: 4rem; }
.clients-track img.lg-md { height: 2.5rem; }
.clients-track img.lg-wide { height: 2.25rem; }
.clients-track img.lg-xwide { height: 2rem; }
.clients-marquee:hover .clients-track img { filter: none; }
@keyframes clients-scroll { to { transform: translateX(calc(-50% - 2rem)); } }
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .clients-track ul { flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; }
  .clients-track ul[aria-hidden] { display: none; }
  .clients-marquee::before, .clients-marquee::after { display: none; }
}

/* ---------- service index cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc-card {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2rem 1.9rem 5.2rem;
  text-decoration: none;
  display: block;
  transition: background 0.3s var(--ease-out);
  background: var(--paper);
}
.svc-card:hover { background: var(--ink); color: var(--paper); }
.svc-card .idx {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--brass); display: block; margin-bottom: 2.6rem;
}
.svc-card:hover .idx { color: var(--brass-2); }
.svc-card h3 { font-family: var(--font-display); font-weight: 580; font-size: 1.42rem; line-height: 1.15; letter-spacing: -0.01em; max-width: 14ch; }
.svc-card p { margin-top: 0.85rem; font-size: 0.94rem; color: var(--ink-soft); max-width: 30ch; transition: color 0.3s; }
.svc-card:hover p { color: rgba(244, 247, 249, 0.7); }
.svc-card .go {
  position: absolute; left: 1.9rem; bottom: 1.7rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass); display: inline-flex; align-items: center; gap: 0.5rem;
}
.svc-card .go::after { content: "→"; transition: translate 0.25s var(--ease-out); }
.svc-card:hover .go::after { translate: 5px 0; }
.svc-card .tag {
  position: absolute; top: 1.9rem; right: 1.9rem;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stamp); border: 1px solid currentColor; padding: 0.25rem 0.5rem;
}
.svc-card:hover .tag { color: var(--brass-3); }

/* ---------- why / manifesto band ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
@media (max-width: 900px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }
.why-grid .lede {
  font-family: var(--font-display); font-weight: 480;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.3; letter-spacing: -0.01em;
}
.why-grid .lede em { color: var(--brass-2); }
.why-list { display: grid; gap: 0; border-top: 1px solid var(--line-light); }
.why-list li { display: flex; gap: 1.4rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line-light); }
.why-list .idx { font-family: var(--font-mono); font-size: 0.7rem; color: var(--brass-2); padding-top: 0.3rem; letter-spacing: 0.1em; flex: none; }
.why-list h3 { font-size: 1.05rem; font-weight: 640; letter-spacing: 0.01em; }
.why-list p { font-size: 0.93rem; color: rgba(244, 247, 249, 0.62); margin-top: 0.3rem; }
.seal-wrap { margin-top: 2.6rem; display: flex; align-items: center; gap: 1.4rem; }
.seal-wrap svg { width: 6.4rem; height: 6.4rem; }
.seal-wrap p { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,247,249,0.55); max-width: 26ch; line-height: 1.8; }

/* ---------- process ---------- */
.process { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .process { grid-template-columns: minmax(0, 1fr); } }
.process li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.9rem 1.7rem 2.2rem; position: relative; background: var(--paper); }
.process li::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display); font-weight: 560; font-style: italic;
  font-size: 3rem; line-height: 1; color: var(--paper-3);
  display: block; margin-bottom: 1.4rem;
  -webkit-text-stroke: 1px var(--brass);
  color: transparent;
}
.process h3 { font-size: 1.08rem; font-weight: 660; }
.process .when { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stamp); margin: 0.4rem 0 0.75rem; }
.process p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- zero panel ---------- */

/* ---------- quote ---------- */
.quote { position: relative; }
.quote blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.7rem);
  line-height: 1.28; letter-spacing: -0.01em;
  max-width: 26ch; margin-inline: auto; text-align: center;
}
.quote blockquote::before { content: "“"; display: block; font-size: 5rem; line-height: 0.6; color: var(--brass); margin-bottom: 1.6rem; }
.quote figcaption { text-align: center; margin-top: 2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.quote figcaption strong { color: var(--ink); font-weight: 600; }

/* ---------- areas ---------- */
.areas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
@media (max-width: 900px) { .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .areas-grid { grid-template-columns: minmax(0, 1fr); } }
.areas-grid a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
  text-decoration: none; font-family: var(--font-display); font-weight: 540; font-size: 1.12rem;
  transition: background 0.2s, color 0.2s;
}
.areas-grid a small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-2); }
.areas-grid a:hover { background: var(--brass-2); color: var(--ink); }
.areas-grid a:hover small { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--paper); text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70rem 30rem at 50% 130%, rgba(0, 134, 205, 0.16), transparent 60%);
}
.cta-band .wrap { position: relative; padding-block: clamp(4rem, 9vw, 7rem); display: grid; justify-items: center; gap: 1.4rem; }
.cta-band h2 { font-size: var(--size-h2); max-width: 22ch; }
.cta-band .phone-big {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 1rem + 3.4vw, 3.4rem);
  color: var(--brass-2); text-decoration: none; letter-spacing: 0.01em;
}
.cta-band .phone-big:hover { color: var(--brass-3); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-light); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; padding-block: 3.6rem 3rem; }
@media (max-width: 1000px) { .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 600px) { .footer-main { grid-template-columns: minmax(0, 1fr); } }
.footer-connect-head { margin-top: 1.6rem; }
.footer-main h3 { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 1.2rem; }
.footer-main ul { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.footer-main a { text-decoration: none; font-size: 0.93rem; color: rgba(244,247,249,0.75); }
.footer-main a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--brass); }
.footer-about p { font-size: 0.93rem; color: rgba(244,247,249,0.65); max-width: 34ch; margin-top: 1.1rem; }
.footer-contact li { font-size: 0.93rem; color: rgba(244,247,249,0.75); }
.footer-contact strong { color: var(--paper); }
.footer-legal { border-top: 1px solid var(--line-light); padding-block: 1.6rem; font-size: 0.78rem; color: rgba(244,247,249,0.5); }
.footer-legal .wrap { display: grid; gap: 0.5rem; }
.footer-legal a { color: inherit; }

/* ---------- interior page hero ---------- */
/* Each area page sets --hero-art to its own landmark artwork, inline on the
   section. Anything that does not sets nothing and keeps the default street
   photograph, so a page can never end up with a blank hero.
   --hero-veil is the overlay: the photograph needs it near-opaque to stay
   legible behind white text, whereas line artwork is already mostly empty and
   reads better through a lighter one. */
.page-hero {
  --hero-veil-top: rgba(10, 36, 52, 0.95);
  --hero-veil-bottom: rgba(10, 36, 52, 0.9);
  background:
    linear-gradient(var(--hero-veil-top), var(--hero-veil-bottom)),
    var(--hero-art, url("../img/hero-london.jpg")) center 22% / cover no-repeat,
    var(--ink);
  background:
    linear-gradient(var(--hero-veil-top), var(--hero-veil-bottom)),
    var(--hero-art, image-set(url("../img/hero-london.webp") type("image/webp"),
              url("../img/hero-london.jpg") type("image/jpeg"))) center 22% / cover no-repeat,
    var(--ink);
  color: var(--paper); position: relative; overflow: hidden;
}
/* Artwork rather than a photograph: lift the veil so the landmarks read, and
   anchor the skyline to the bottom of the band instead of cropping it. */
.page-hero.has-art {
  --hero-veil-top: rgba(10, 36, 52, 0.82);
  --hero-veil-bottom: rgba(10, 36, 52, 0.72);
  /* Fit the whole width, not the height. Scaling to height centres a 1600-wide
     drawing inside a narrower band and pushes the outermost landmarks off the
     edges — which lost the Liver Building entirely. Fitting the width keeps
     every landmark on screen and sits the skyline along the bottom. */
  background-position: center bottom;
  background-size: 100% auto;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70rem 32rem at 90% -30%, rgba(0,134,205,0.13), transparent 60%); }
.page-hero .wrap { position: relative; padding-block: clamp(3.6rem, 8vw, 6.4rem) clamp(2.8rem, 6vw, 4.6rem); }
.page-hero h1 { font-size: clamp(2.3rem, 1rem + 4.6vw, 4.4rem); max-width: 17ch; margin-top: 1.5rem; }
.page-hero .lede { margin-top: 1.3rem; max-width: 58ch; color: rgba(244,247,249,0.75); font-size: 1.08rem; }
.breadcrumb { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,247,249,0.5); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--brass-2); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.6rem; opacity: 0.5; }

/* ---------- article / two-col prose ---------- */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 960px) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
.prose h2 { font-family: var(--font-display); font-weight: 580; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -0.01em; margin: 2.6rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.14rem; font-weight: 660; margin: 1.9rem 0 0.6rem; }
.prose p { margin-bottom: 1rem; color: #2c3b47; }
.prose p strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.2rem; color: #2c3b47; }
.prose li { margin-bottom: 0.45rem; }
.prose .statute {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  background: var(--paper-2); border-left: 2px solid var(--brass);
  padding: 0.9rem 1.1rem; margin: 1.4rem 0; color: var(--ink-soft);
}

.side-rail { position: sticky; top: 6.4rem; display: grid; gap: 1.2rem; }
.rail-card { border: 1px solid var(--line); padding: 1.5rem; background: var(--paper); }
.rail-card.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rail-card h3 { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.9rem; }
.rail-card.ink h3 { color: var(--brass-2); }
.rail-card .phone {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; text-decoration: none; display: block; line-height: 1.1;
}
.rail-card.ink .phone { color: var(--brass-2); }
.rail-card .phone:hover { color: var(--brass); }
.rail-card p { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.6rem; }
.rail-card.ink p { color: rgba(244,247,249,0.65); }
.rail-card .btn { width: 100%; justify-content: center; margin-top: 1rem; }
.rail-card ul { display: grid; gap: 0.5rem; }
.rail-card ul a { font-size: 0.9rem; text-decoration: none; color: var(--ink-soft); display: flex; gap: 0.5rem; min-height: 24px; align-items: center; }
.rail-card ul a:hover { color: var(--ink); }
.rail-card ul a::before { content: "→"; color: var(--brass); }

/* ---------- fees table ---------- */
.fees-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0 0.6rem; font-size: 0.94rem; }
.fees-table caption { text-align: left; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.8rem; }
.fees-table th { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; color: var(--ink-soft); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line-strong); }
.fees-table td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.fees-table td:last-child, .fees-table th:last-child { text-align: right; white-space: nowrap; }
.fees-table .fee { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; }
.table-scroll { overflow-x: auto; }

/* checklist */
.checklist { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }
.checklist li { display: flex; gap: 1rem; padding: 1rem 0.2rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.checklist .tick { color: var(--brass); font-weight: 700; flex: none; font-family: var(--font-mono); }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.45rem 0.2rem;
  font-family: var(--font-display); font-weight: 560; font-size: 1.18rem; letter-spacing: -0.005em;
  transition: color 0.2s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--brass); }
.faq-list summary .m {
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 400; color: var(--brass); flex: none;
  transition: rotate 0.25s var(--ease-out); width: 1em; text-align: center;
}
.faq-list details[open] summary .m { rotate: 45deg; }
.faq-list .faq-a { padding: 0 0.2rem 1.6rem; max-width: 68ch; color: #2c3b47; }
.faq-list .faq-a p { margin-bottom: 0.8rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-info .phone-hero { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); text-decoration: none; color: var(--ink); display: inline-block; line-height: 1.1; }
.contact-info .phone-hero:hover { color: var(--brass); }
.contact-rows { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 2rem; }
.contact-rows > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0.2rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.contact-rows dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.3rem; }
.contact-rows dd a { color: var(--ink); }

.form-card {
  background: var(--card-bg); color: var(--card-fg);
  /* the card sits on --paper and is only 2% darker, so the border is what
     makes it a panel at all */
  border: 1px solid var(--card-line);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.form-card h2 { font-family: var(--font-display); font-weight: 580; font-size: 1.6rem; }
.form-card .form-note { font-size: 0.88rem; color: var(--card-muted); margin: 0.6rem 0 1.8rem; }
.form-card .form-note.form-required { color: var(--ink); font-weight: 600; margin-top: -1rem; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field label { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--card-accent); margin-bottom: 0.45rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--card-input-bg); border: 1px solid var(--card-line-strong);
  color: var(--card-fg); font: inherit; font-size: 0.95rem; padding: 0.8rem 0.95rem;
  transition: border-color 0.2s;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--card-accent); }
.form-card .btn { margin-top: 1.4rem; width: 100%; justify-content: center; }
.form-card .privacy-note { font-size: 0.76rem; color: var(--card-faint); margin-top: 1rem; }

/* ---------- reveal animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* reveal styles gated behind .js so content is never hidden if scripts fail */
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .js .reveal-stagger.in > * { opacity: 1; transform: none; }
  .js .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
  .js .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
  .js .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
  .js .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
  .js .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.4s; }

  .hero .eyebrow, .hero h1, .hero-sub, .hero-ctas, .hero-phone-note { animation: rise 0.9s var(--ease-out) both; }
  .hero h1 { animation-delay: 0.08s; }
  .hero-sub { animation-delay: 0.18s; }
  .hero-ctas { animation-delay: 0.28s; }
  .hero-phone-note { animation-delay: 0.36s; }
  .hero-side .cell { animation: rise 0.8s var(--ease-out) both; }
  .hero-side .cell:nth-child(1) { animation-delay: 0.3s; }
  .hero-side .cell:nth-child(2) { animation-delay: 0.38s; }
  .hero-side .cell:nth-child(3) { animation-delay: 0.46s; }
  .hero-side .cell:nth-child(4) { animation-delay: 0.54s; }
  @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

/* print */
@media print {
  .topbar, .site-header, .site-footer, .cta-band, .form-card { display: none; }
}


/* Instruct Us: the warrant form is long enough to need grouping, and a couple of
   fields need a line of explanation under them. */
.form-grid .form-section {
  grid-column: 1 / -1;
  margin: 22px 0 2px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #d8e1e8);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft, #3c5364);
}
.form-grid .form-section:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.field-hint {
  margin: 6px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft, #3c5364);
}


/* Areas We Cover: the by-city index. A plain two-column list, because it is a
   directory and not a set of cards. */
.city-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--line, #d8e1e8);
}
.city-list li {
  border-bottom: 1px solid var(--line, #d8e1e8);
  padding: 0.85rem 0;
}
.city-list a { font-weight: 600; text-decoration: none; }
.city-list a:hover { text-decoration: underline; }
.city-list .muted { color: var(--ink-soft, #3c5364); font-size: 0.9em; }

/* ---------- narrow-viewport hardening ---------- */
/* Long unbreakable strings are the single biggest cause of mobile overflow here:
   a bare domain (www.commercialrentbailiffslimited.co.uk) is 39 characters that
   cannot wrap, and it clipped the legal pages at 320px. break-word only splits a
   word that genuinely will not fit on a line of its own, so ordinary copy is
   untouched. */
body { overflow-wrap: break-word; }

/* An email address also sets its container's MIN-CONTENT width, which break-word
   does not change, so one address could push a whole grid past the viewport.
   anywhere fixes the sizing too, and is scoped to where such strings appear. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.contact-rows dd { overflow-wrap: anywhere; }

/* Below ~480px the fixed 9rem label column leaves too little room for the value. */
@media (max-width: 480px) {
  .contact-rows > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .contact-rows dt { padding-top: 0; }
}

/* The email plus the hours measures ~304px. Below 360px the bar has less than
   that to give, so the hours -- which repeat in the footer -- are dropped rather
   than allowed to wrap the bar onto a second line. */
@media (max-width: 359px) {
  .topbar-hours { display: none; }
}

/* ---------- keyboard focus ---------- */
/* WCAG 2.4.7. The browser default ring all but disappears on the ink sections,
   and the form fields explicitly clear their outline. :focus-visible matches
   keyboard focus only, so mouse and touch users see no change. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.on-ink :focus-visible,
.nav :focus-visible,
.topbar :focus-visible {
  outline-color: #ffffff;
}
.form-card :focus-visible { outline-color: var(--card-accent); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 1px;
}

/* ---------- notice checker ---------- */
/* The whole row is the tap target, so it needs to clear 24px (WCAG 2.2) even
   when the label fits on a single line, which it does on wider screens. */
.check-list { display: grid; gap: 0.1rem; }
.check-list label {
  display: flex; gap: 0.7rem; align-items: flex-start;
  cursor: pointer; font-size: 0.92rem; line-height: 1.45;
  font-family: var(--font-text); letter-spacing: 0; text-transform: none;
  color: inherit; margin-bottom: 0;
  min-height: 2.4rem; padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--card-line);
}
.check-list label:last-child { border-bottom: 0; }
.check-list input { width: auto; flex: none; margin-top: 0.22rem; accent-color: var(--card-accent); }
.check-list label:hover { color: var(--card-accent); }
.check-list .field-hint { display: inline; }

/* ---------- warrant: tenancy type grid ---------- */
/* The paper warrant lays these out four across. Same here, collapsing on narrow
   screens. The whole row is the tap target, so it clears 24px (WCAG 2.2). */
/* The paper warrant runs these four across on A4. The form card is nearer 470px,
   where four columns leaves ~107px a cell and "Commercial/Industrial" cannot fit.
   Two across, one on a narrow phone. */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 560px) { .check-grid { grid-template-columns: minmax(0, 1fr); } }
/* An option row is not a field label. Left to inherit .field label, these came
   out as letterspaced capitals — which set the indemnity consent, the one
   sentence a client genuinely has to read, in 0.92rem mono caps, and broke the
   longer tenancy types mid-word. */
.check-grid label {
  display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
  font-size: 0.92rem; line-height: 1.4; min-height: 2.5rem; padding: 0.55rem 0.2rem;
  font-family: var(--font-text); letter-spacing: 0; text-transform: none;
  color: inherit; margin-bottom: 0;
}
.check-grid input { width: auto; flex: none; accent-color: var(--card-accent); margin-top: 0.12rem; }
/* a bare text node is an anonymous flex item and will not shrink below its
   min-content width, so the label text is wrapped and allowed to break */
.check-grid label span { min-width: 0; overflow-wrap: break-word; }
.check-grid label:hover { color: var(--card-accent); }

/* the indemnity a client is agreeing to — set apart, and readable */
.indemnity {
  background: var(--card-input-bg);
  border: 1px solid var(--card-line-strong); padding: 1.1rem 1.2rem; margin: 0.4rem 0 0;
  font-size: 0.88rem; line-height: 1.6; color: var(--card-muted);
  max-height: 12rem; overflow-y: auto;
}
.indemnity p { margin: 0 0 0.7rem }
.indemnity p:last-child { margin-bottom: 0 }

/* Visually hidden, still read by screen readers. The warrant's continuation
   address lines carry no printed label; they still need one announced. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- stepped forms ---------- */
/* The authority forms mirror paper warrants and run to thirty-odd fields, which
   was nearly eight phone screens of scrolling. Splitting them into steps is a
   progressive enhancement: without JavaScript every field is present and the
   form submits exactly as before, so nothing depends on the script running. */
.js .form-step[hidden] { display: none; }
.form-step { display: contents; }

.step-bar {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center;
  margin: 0 0 1.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--card-line);
}
.step-bar li {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--card-faint);
}
.step-bar .n {
  width: 1.45rem; height: 1.45rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--card-line-strong); font-size: 0.62rem;
}
.step-bar .is-now { color: var(--card-accent); }
.step-bar .is-now .n { border-color: var(--card-accent); background: var(--card-accent); color: #ffffff; }
.step-bar .is-done { color: var(--card-muted); }
.step-bar .is-done .n { border-color: var(--card-accent); color: var(--card-accent); }

/* The first heading of a step is the step's own title, so it is redundant once
   the stepper is running. Subheadings inside a step stay. */
.js .form-step > h3[data-step]:first-child { display: none; }

.step-nav { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.step-nav .btn { margin-top: 0; width: auto; flex: 1 1 auto; justify-content: center; }
.step-nav .btn-back {
  flex: 0 0 auto; background: none; border: 1px solid var(--card-line-strong);
  color: var(--card-fg);
}
.step-nav .btn-back:hover { border-color: var(--card-accent); color: var(--card-accent); }
@media (max-width: 420px) { .step-nav { flex-direction: column-reverse; } }

.step-count {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--card-muted);
  margin: 0.9rem 0 0; text-align: center;
}

/* On a phone the contact-grid stacks, and the details block sat above the form
   — 545px of it, so the form a visitor came to complete did not begin until
   1.6 screens down. On a page whose whole purpose is submitting something, the
   form comes first and the details follow it. */
@media (max-width: 960px) {
  .contact-grid > .contact-info { order: 2; margin-top: 3rem; }
  .contact-grid > form { order: 1; }
}

/* A little of the vertical run inside the forms, without crowding them. */
.form-grid { row-gap: 0.95rem; }
.field-hint { margin-top: 4px; }

/* On a phone the step labels wrap across three untidy lines. The counter under
   the buttons already names the current step, so the bar keeps only the
   numbers and becomes one clean row. */
@media (max-width: 620px) {
  .step-bar { gap: 0.6rem; justify-content: flex-start; }
  .step-bar li span:not(.n) { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .step-bar li::after {
    content: ""; width: 1.1rem; height: 1px; background: rgba(244, 247, 249, 0.2);
  }
  .step-bar li:last-child::after { display: none; }
}