/* ==========================================================================
   Lovemore Lawyers
   Palette and type derived from the refreshed logo: ink black, corner red,
   brushed silver. Display face carries the fight poster; the serif carries
   the law.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #101012;
  --ink-raised: #17171a;
  --ink-line: #26262b;
  --corner: #d21b21;
  --corner-deep: #a5151a;
  --corner-wash: rgba(210, 27, 33, 0.08);
  --canvas: #f4f3f0;
  --paper: #ffffff;
  --rope: #8d8d93;
  --rope-dim: #5c5c63;
  --text: #1a1a1d;
  --muted: #55555c;
  --hairline: #ddddd8;

  /* Type */
  --display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ui: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-micro: 0.72rem;
  --t-small: 0.9rem;
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.115rem);
  --t-lead: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  --t-h3: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --t-h2: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --t-h1: clamp(2.5rem, 1.4rem + 4.6vw, 5.3rem);
  --t-tape: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);

  /* Space */
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --band: clamp(3.75rem, 7vw, 7.25rem);
  --max: 1240px;
  --max-prose: 68ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--corner);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--corner);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-family: var(--ui);
  z-index: 200;
}
.skip:focus { left: 0; }

.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;
}

/* -------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--half { padding-block: calc(var(--band) * 0.58); }

.band--ink {
  background: var(--ink);
  color: #ece9e4;
}
.band--ink h2, .band--ink h3 { color: #fff; }

.band--paper { background: var(--paper); }

.prose { max-width: var(--max-prose); }
.prose a { color: var(--corner-deep); text-underline-offset: 3px; }
.band--ink .prose a { color: #ff7a7f; }

/* Eyebrow: letterspaced utility caps used as a structural label */
.eyebrow {
  font-family: var(--ui);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--corner);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--corner);
  flex: none;
}
.band--ink .eyebrow { color: #ff5f65; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--muted);
}
.band--ink .lead { color: #b6b3ae; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  --btn-bg: var(--corner);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.02rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:hover {
  background: var(--corner-deep);
  border-color: var(--corner-deep);
  transform: translateY(-2px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--text);
}
.btn--ghost:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--canvas);
}

.band--ink .btn--ghost,
.hero .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.band--ink .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Text link with a rule that sweeps in from the left */
.arrow {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--corner);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.arrow::after {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: width 0.24s var(--ease);
}
.arrow:hover::after { width: 40px; }

/* --------------------------------------------------------------- topbar -- */

.topbar {
  background: #0a0a0b;
  color: var(--rope);
  font-family: var(--ui);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-line);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.7rem;
}
.topbar a { color: #e6e3de; text-decoration: none; }
.topbar a:hover { color: var(--corner); }
.topbar__contact { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.95rem;
}
.nav__logo { display: block; flex: none; }
.nav__logo img {
  width: clamp(132px, 17vw, 172px);
  height: auto;
  aspect-ratio: 1234 / 459; /* reserves space, prevents layout shift */
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links > li { position: relative; }

.nav__link {
  font-family: var(--ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: #d7d4cf;
  padding-block: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--corner);
  transition: width 0.26s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item--open > .nav__link::after { width: 100%; }
.nav__link:hover { color: #fff; }
.nav__link[aria-current="page"] { color: #fff; }

.nav__caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.24s var(--ease);
}
.nav__item--open .nav__caret { transform: translateY(1px) rotate(225deg); }

.nav__sub {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: calc(100% + 0.95rem);
  left: -1rem;
  min-width: 268px;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--corner);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item--open .nav__sub,
.nav__links > li:hover > .nav__sub,
.nav__links > li:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub a {
  display: block;
  padding: 0.72rem 1.25rem;
  font-family: var(--ui);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #cfccc7;
  border-left: 2px solid transparent;
}
.nav__sub a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border-left-color: var(--corner);
}

.nav__cta { flex: none; }
.nav__cta .btn { padding: 0.8rem 1.3rem; font-size: 0.82rem; }

.nav__toggle {
  display: none;
  position: relative;
  z-index: 3; /* stays above the fixed drawer so the close state is reachable */
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  width: 46px; height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav__scrim { display: none; }
.nav__drawer-cta { display: none; }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  transition: transform 0.24s var(--ease), opacity 0.18s;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(0); }

@media (max-width: 1000px) {
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6.5rem 1.75rem 2rem;
    background: var(--ink);
    border-left: 1px solid var(--ink-line);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow-y: auto;
  }
  .nav__links[data-open="true"] { transform: translateX(0); }
  .nav__link {
    font-size: 1rem;
    padding-block: 1.05rem;
    border-bottom: 1px solid var(--ink-line);
    justify-content: space-between;
  }
  .nav__link::after { display: none; }
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-left: 2px solid var(--corner);
    margin: 0 0 0 0.5rem;
    background: transparent;
    display: none;
  }
  .nav__item--open .nav__sub { display: block; }

  .nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  .nav__scrim[hidden] { display: none; }
  .nav__scrim[data-open="true"] { opacity: 1; }

  .nav__links { z-index: 2; }

  .nav__drawer-cta {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
  }
  .nav__drawer-cta .btn { width: 100%; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  background: var(--ink);
  color: #ece9e4;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.75rem);
}

.hero__title {
  font-size: var(--t-h1);
  line-height: 0.86;
  letter-spacing: -0.005em;
  margin-bottom: 1.6rem;
}
.hero__title em {
  font-style: normal;
  color: var(--corner);
}
.hero__line {
  display: block;
  overflow: hidden;
}
.hero__line > span {
  display: block;
  transform: translateY(105%);
  animation: rise 0.85s var(--ease) forwards;
}
.hero__line:nth-child(2) > span { animation-delay: 0.09s; }
.hero__line:nth-child(3) > span { animation-delay: 0.18s; }

@keyframes rise { to { transform: translateY(0); } }

.hero__attrib {
  font-family: var(--ui);
  font-size: var(--t-micro);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--rope);
  margin-bottom: 2.1rem;
}
.hero .lead { max-width: 46ch; }

.hero__figure {
  position: relative;
  align-self: stretch;
  min-height: 380px;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: contrast(1.04) saturate(0.92);
}
/* Corner post: a single red rule anchoring the frame, like a ring corner */
.hero__figure::after {
  content: "";
  position: absolute;
  left: -14px;
  bottom: -14px;
  width: 42%;
  height: 46%;
  border-left: 3px solid var(--corner);
  border-bottom: 3px solid var(--corner);
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .hero__figure::after { left: 0; bottom: 0; }
}

/* ----------------------------------------------- signature: tale of tape -- */

.tape {
  background: #0a0a0b;
  border-top: 2px solid var(--corner);
  border-bottom: 1px solid var(--ink-line);
  color: #fff;
}
.tape__inner {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) 3.2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.tape__label {
  font-family: var(--ui);
  text-transform: uppercase;
}
.tape__label strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  margin-bottom: 0.6rem;
}
.tape__label span {
  display: block;
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--rope);
}

.tape__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.tape__stat {
  padding: 0.2rem clamp(0.6rem, 1.6vw, 1.5rem);
  border-left: 1px solid var(--ink-line);
}
.tape__stat:first-child { border-left: 0; padding-left: 0; }

.tape__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-tape);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: #fff;
  display: block;
  margin-bottom: 0.7rem;
}
.tape__stat:nth-child(5) .tape__num { color: var(--corner); }

.tape__key {
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #e2dfda;
  display: block;
  line-height: 1.35;
}
.tape__sub {
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--rope-dim);
  display: block;
  margin-top: 0.3rem;
}

@media (max-width: 1000px) {
  .tape__inner { grid-template-columns: 1fr; }
  .tape__stats { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .tape__stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .tape__stats { grid-template-columns: repeat(2, 1fr); }
  .tape__stat { border-left: 0; padding-left: 0; }
  .tape__stat:nth-child(3n + 1) { padding-left: 0; }
}

/* -------------------------------------------------------------- corners -- */

.corners {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.corner {
  position: relative;
  padding: clamp(2.5rem, 4.5vw, 4.75rem) clamp(1.5rem, 3.5vw, 3.75rem);
  display: flex;
  flex-direction: column;
}
.corner--dark { background: var(--ink); color: #cfccc7; }
.corner--dark h2 { color: #fff; }
.corner--light { background: var(--paper); }

.corner__media {
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.corner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.corner:hover .corner__media img { transform: scale(1.045); }

.corner h2 { margin-bottom: 1.1rem; }
.corner p { color: inherit; }
.corner--light p { color: var(--muted); }

.corner__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid currentColor;
}
.corner--dark .corner__list { border-color: var(--ink-line); }
.corner--light .corner__list { border-color: var(--hairline); }

.corner__list li { border-bottom: 1px solid; }
.corner--dark .corner__list li { border-color: var(--ink-line); }
.corner--light .corner__list li { border-color: var(--hairline); }

.corner__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  text-decoration: none;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: padding-left 0.24s var(--ease), color 0.2s;
}
.corner__list a::after {
  content: "";
  width: 20px; height: 1.5px;
  background: var(--corner);
  flex: none;
  align-self: center;
  transition: width 0.24s var(--ease);
}
.corner__list a:hover { padding-left: 0.6rem; color: var(--corner); }
.corner__list a:hover::after { width: 34px; }

.corner__foot { margin-top: auto; padding-top: 2.1rem; }

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

/* ---------------------------------------------------------------- motto -- */

.motto { background: var(--corner); color: #fff; }
.motto__inner {
  padding-block: clamp(3.25rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: end;
}
.motto blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 1rem + 4.2vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: 0.002em;
  max-width: 17ch;
}
.motto cite {
  font-family: var(--ui);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  display: block;
  margin-top: 1.9rem;
}
.motto__mark {
  font-family: var(--display);
  font-size: clamp(6rem, 13vw, 13rem);
  line-height: 0.6;
  color: rgba(255, 255, 255, 0.16);
  user-select: none;
}
@media (max-width: 780px) {
  .motto__inner { grid-template-columns: 1fr; }
  .motto__mark { display: none; }
}

/* ---------------------------------------------------------------- steps -- */
/* Numbered because the sequence is real: a matter runs in this order. */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.band--ink .steps { background: var(--ink-line); border-color: var(--ink-line); }

.step {
  background: var(--canvas);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
.band--ink .step { background: var(--ink); }
.band--paper .step { background: var(--paper); }

.step__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--corner);
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.step h3 { font-size: 1.15rem; margin-bottom: 0.75rem; letter-spacing: 0.04em; }
.step p { font-size: 0.98rem; color: var(--muted); margin: 0; }
.band--ink .step p { color: #9d9a95; }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- voices -- */

.voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.voice {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--corner);
  padding: clamp(1.6rem, 2.6vw, 2.35rem);
  display: flex;
  flex-direction: column;
}
.voice p {
  font-size: 1.02rem;
  line-height: 1.62;
  margin-bottom: 1.6rem;
}
.voice footer {
  margin-top: auto;
  font-family: var(--ui);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 880px) { .voices { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- splits -- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--narrow { grid-template-columns: 0.85fr 1.15fr; }
.split__media { position: relative; }
.split__media img { width: 100%; }
.split__media--rule::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -12px;
  width: 38%;
  height: 40%;
  border-top: 3px solid var(--corner);
  border-right: 3px solid var(--corner);
}
@media (max-width: 860px) {
  .split, .split--narrow { grid-template-columns: 1fr; }
  .split__media--rule::after { right: 0; top: 0; }
}

/* ------------------------------------------------------------ page head -- */

.pagehead {
  background: var(--ink);
  color: #ece9e4;
  padding-block: clamp(3rem, 5.5vw, 5.5rem);
  position: relative;
}
.pagehead h1 { margin-bottom: 1.35rem; }
.pagehead .lead { max-width: 58ch; }

.crumbs {
  font-family: var(--ui);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rope-dim);
  margin-bottom: 1.75rem;
}
.crumbs a { color: var(--rope); text-decoration: none; }
.crumbs a:hover { color: var(--corner); }
.crumbs span { margin-inline: 0.55rem; }

/* --------------------------------------------------------------- panels -- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}
.panel:hover { border-color: var(--corner); transform: translateY(-3px); }
.panel h3 { font-size: 1.25rem; letter-spacing: 0.03em; margin-bottom: 0.85rem; }
.panel p { font-size: 0.99rem; color: var(--muted); margin: 0; }
.panel .arrow { margin-top: 1.5rem; }

.band--ink .panel {
  background: var(--ink-raised);
  border-color: var(--ink-line);
}
.band--ink .panel p { color: #9d9a95; }

/* Checklist used on service pages */
.checks { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.checks li {
  position: relative;
  padding: 0.72rem 0 0.72rem 2.1rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.01rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.32rem;
  width: 11px; height: 11px;
  background: var(--corner);
  transform: rotate(45deg);
}
.band--ink .checks li { border-color: var(--ink-line); }

/* Definition rows: qualifications, fees, court levels */
.rows { border-top: 1px solid var(--hairline); margin-top: 2rem; }
.row {
  display: grid;
  grid-template-columns: minmax(140px, 0.5fr) 1fr;
  gap: 1rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
}
.row dt {
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corner);
  margin: 0;
}
.row dd { margin: 0; }
.band--ink .rows, .band--ink .row { border-color: var(--ink-line); }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; gap: 0.35rem; } }

/* FAQ: question left, answer right. The split is the structure. */
.faq { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 3.5vw, 3rem); }
.band--ink .faq { border-color: var(--ink-line); }

.qa {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) 1.18fr;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 2.6vw, 2.35rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.band--ink .qa { border-color: var(--ink-line); }

.qa h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.32rem);
  letter-spacing: 0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: pretty;
}
.qa__a p { margin: 0; color: var(--muted); }
.band--ink .qa__a p { color: #9d9a95; }

@media (max-width: 760px) {
  .qa { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* Pull quote */
.pull {
  border-left: 3px solid var(--corner);
  padding: 0.35rem 0 0.35rem clamp(1.25rem, 2.5vw, 2.25rem);
  margin: clamp(2rem, 3.5vw, 3rem) 0;
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
  max-width: 60ch;
}
.band--ink .pull { color: #e6e3de; }
.pull cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--ui);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.band--ink .pull cite { color: var(--rope); }

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--ink-line);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.gallery figure { margin: 0; position: relative; background: var(--ink); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rope);
  padding: 0.9rem 1rem 1.1rem;
}

/* ------------------------------------------------------------------ cta -- */

.cta {
  background: var(--ink);
  color: #ece9e4;
  border-top: 2px solid var(--corner);
}
.cta__inner {
  padding-block: clamp(3rem, 5.5vw, 5.5rem);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.cta h2 { color: #fff; margin-bottom: 1.15rem; }
.cta__aside {
  border-left: 1px solid var(--ink-line);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.cta__aside dt {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rope-dim);
  margin-bottom: 0.35rem;
}
.cta__aside dd {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.cta__aside dd:last-child { margin-bottom: 0; }
.cta__aside a { color: #fff; text-decoration: none; }
.cta__aside a:hover { color: var(--corner); }
@media (max-width: 860px) {
  .cta__inner { grid-template-columns: 1fr; }
  .cta__aside { border-left: 0; border-top: 1px solid var(--ink-line); padding: 2rem 0 0; }
}

/* ----------------------------------------------------------------- form -- */

.form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-family: var(--ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.92rem 1rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field select {
  font-family: var(--ui);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--corner) 50%),
                    linear-gradient(135deg, var(--corner) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field textarea { min-height: 152px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--corner);
  box-shadow: 0 0 0 3px var(--corner-wash);
}
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 560px) { .field--pair { grid-template-columns: 1fr; } }

.form__note {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}
.form__status {
  font-family: var(--ui);
  font-size: 0.9rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--corner);
  background: var(--corner-wash);
  display: none;
}
.form__status[data-show="true"] { display: block; }

.hp { position: absolute; left: -9999px; }

/* ------------------------------------------- sticky mobile contact bar -- */
/* Thumb-reachable on a phone, where most people find a lawyer mid-crisis.
   Sits below the nav's stacking context (z-index 90), so the drawer and its
   scrim correctly cover it when the menu is open. */

.callbar { display: none; }

@media (max-width: 900px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 0.7rem var(--gutter);
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 11, 0.96);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--corner);
  }

  .callbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.6rem 0.75rem;
    border-radius: 2px;
    border: 2px solid transparent;
    font-family: var(--ui);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 1.15;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
  }
  .callbar__btn svg { flex: none; }

  .callbar__btn--call { background: var(--corner); border-color: var(--corner); color: #fff; }
  .callbar__btn--call:active { background: var(--corner-deep); }

  .callbar__btn--book { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
  .callbar__btn--book:active { background: #fff; color: var(--ink); }

  /* The bar carries the phone number now, so the top strip can shed it. */
  .topbar__contact { display: none; }
}

@media print { .callbar { display: none; } }

/* --------------------------------------------------------------- footer -- */

.footer {
  background: #0a0a0b;
  color: var(--rope);
  font-size: 0.95rem;
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.footer__logo img {
  width: 232px;
  height: auto;
  aspect-ratio: 1234 / 573;
  margin-bottom: 1.6rem;
}
.footer h4 {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: #fff;
  margin-bottom: 1.35rem;
  font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.7rem; }
.footer a { color: var(--rope); text-decoration: none; transition: color 0.18s; }
.footer a:hover { color: #fff; }
.footer address { font-style: normal; line-height: 1.75; }

.footer__bar {
  border-top: 1px solid var(--ink-line);
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-family: var(--ui);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rope-dim);
}
.footer__disclaimer {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--rope-dim);
  border-top: 1px solid var(--ink-line);
  padding-block: 1.6rem;
  max-width: 90ch;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

/* Clear the sticky contact bar so the last footer line is never trapped behind
   it. This must come after .footer__bar's own padding-block or it loses the
   cascade: a media query adds no specificity. */
@media (max-width: 900px) {
  .footer__bar { padding-bottom: calc(1.75rem + 84px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------ utilities -- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal[data-seen="true"] { opacity: 1; transform: none; }

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .prose { margin-inline: auto; }

.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__line > span { transform: none; }
  .reveal { opacity: 1; transform: none; }
}