/* ==========================================================================
   Morrison & Barnes — sections
   One block per homepage section, in document order.
   ========================================================================== */

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 60ch; }
/* 60ch was clipping the longer italic second lines ("attorneys in Jackson, TN"
   measured 616px against a 600px box), forcing an ugly extra wrap. */
.section-head--center { margin-inline: auto; text-align: center; max-width: min(100%, 46rem); }

/* Full-bleed heading. The size is tuned so the longest line actually reaches
   the end of the shell instead of trailing off at ~64% with dead space beside
   it: ~8.1vw tracks the container (viewport minus gutters) below 1240px, and
   the 5.8rem cap is the largest size that still fits once .shell stops growing.
   Measured against "Personal injury attorneys" in Editor, the longest line. */
.section-head--wide { max-width: none; }
.section-head--wide .section-title {
  font-size: clamp(2rem, calc(7.9vw - 8px), 5.7rem);
  line-height: 0.95;
  text-wrap: balance;
}

/* ---------- Hero ------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 7rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scaled slightly so the parallax translate never exposes an edge. */
  transform: scale(1.12);
  will-change: transform;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(5, 12, 34, 0.94) 0%, rgba(5, 12, 34, 0.72) 45%, rgba(5, 12, 34, 0.45) 100%),
    linear-gradient(to top, rgba(5, 12, 34, 0.98) 0%, rgba(5, 12, 34, 0) 45%);
}

/* Full shell width: the display headline is sized to fill it. */
.hero-inner { position: relative; z-index: 1; width: 100%; }

/* ---- Staggered display headline -------------------------------------
   Three words on overlapping lines, with two letterspaced rule-lines woven
   into the gaps. --hero-size is tuned so "$130 Million" fills the shell; the
   silver words are a fixed fraction of it so the stack stays in proportion at
   every width. */
.hero-title {
  /* 14.6vw tracks the shell's content width below 1240px; the 11.5rem cap is
     what still fits once .shell stops growing. Derived from the measured
     width-per-font-px of "$130 Million" in Editor (6.07), not guessed. */
  --hero-size: clamp(2.5rem, 14.6vw, 11.5rem);
  --hero-silver: 0.66em;
  display: block;
  font-size: var(--hero-size);
  line-height: 0.82;
  letter-spacing: -0.005em;
  margin-bottom: 2rem;
}

.hero-line {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  width: 100%;
}
/* Tight, but NOT overlapping. In the reference the three words clear each
   other vertically -- the interlocked look comes from the horizontal offsets
   and the rules woven between them, not from collision. Negative leading here
   drove the "$" straight through "Over". */
.hero-line--b { margin-top: 0.02em; }
.hero-line--c { margin-top: 0.02em; justify-content: flex-end; }

.hero-word {
  display: block;
  white-space: nowrap;
  flex: none;
}
.hero-word--silver {
  font-size: var(--hero-silver);
  color: #b9bcc6;
}
.hero-word--blue { color: var(--blue-500); }

/* Rule-lines. The text stretches across its rule the way the reference does,
   via text-align-last on a single line. */
.hero-meta {
  /* basis 0, so the width is purely the space left over by the word beside
     it. With basis:auto the measured tracking would feed back into the
     flex sizing and never settle. */
  flex: 1 1 0;
  min-width: 0;
  display: block;
}
.hero-meta__text {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.56rem, 0.86vw, 0.92rem);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e8eaf0;
  /* Starting value only. main.js measures the text and sets the exact
     letter-spacing needed to span the rule -- justify would stretch the word
     gaps instead, which is not the same look at all. */
  letter-spacing: 0.34em;
}
/* Rules live on the container, not the text. The text box carries a trailing
   letter-space after its final glyph, so a border there would overhang the
   line it is supposed to match. */
.hero-meta--under { border-bottom: 1px solid rgba(255, 255, 255, 0.32); }
.hero-meta--over  { border-top: 1px solid rgba(255, 255, 255, 0.32); }
.hero-meta--under .hero-meta__text { padding-bottom: 0.9em; }
.hero-meta--over .hero-meta__text { padding-top: 0.9em; }

/* Word wrappers created by main.js for the staggered reveal. */
.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.06em 0.14em;
  margin: -0.06em -0.06em -0.14em;
}
.hero-title .word > span { display: inline-block; will-change: transform; }

.hero-tag {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  color: #b9bcc6;
  text-align: center;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 2rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.hero-proof li { display: flex; align-items: center; gap: 0.7rem; }
.hero-proof li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--blue-500);
  transform: rotate(45deg);
  flex: none;
}

.hero-disclaimer {
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--grey-400);
  letter-spacing: 0.04em;
  text-align: center;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  z-index: 2;
  width: 24px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}
.hero-scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% 0;
  width: 3px; height: 7px;
  background: var(--white);
  border-radius: 999px;
  animation: scrollcue 1.9s var(--ease) infinite;
}
@keyframes scrollcue {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------- Trust bar -------------------------------------------------- */
.trustbar {
  background: var(--navy-900);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.trustbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.trustbar-logo {
  width: auto;
  height: clamp(38px, 5vw, 58px);
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
.trustbar-logo:hover { opacity: 1; filter: none; }

/* ---------- Case results ----------------------------------------------- */
.results {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(42, 39, 233, 0.16), transparent 60%),
    var(--navy-950);
}
.results-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
.results-feature { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---- Feature card ---- */
.result-hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 4vw, 3.5rem);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(150deg, rgba(42, 39, 233, 0.32) 0%, rgba(16, 36, 94, 0.5) 45%, rgba(5, 12, 34, 0.9) 100%),
    var(--navy-900);
  box-shadow: 0 30px 80px -30px rgba(42, 39, 233, 0.55);
}
/* Gradient hairline border, drawn with a mask so it stays 1px on any radius. */
.result-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(120, 118, 255, 0.9), rgba(255, 255, 255, 0.12) 40%, rgba(42, 39, 233, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* Slow drifting glow behind the number. */
.result-hero__glow {
  position: absolute;
  inset: auto -25% -55% -10%;
  z-index: 0;
  height: 380px;
  background: radial-gradient(circle at 30% 50%, rgba(42, 39, 233, 0.75), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-4%, 4%, 0) scale(1); }
  to   { transform: translate3d(8%, -6%, 0) scale(1.15); }
}
/* Oversized monogram watermark. */
.result-hero__mark {
  position: absolute;
  top: -0.28em; right: -0.08em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(9rem, 16vw, 15rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}
.result-hero > :not(.result-hero__glow):not(.result-hero__mark) { position: relative; z-index: 1; }

.result-hero__label,
.result-item__label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 0.9rem;
}
.result-hero__figure {
  font-family: var(--font-display);
  /* Sized to hold "$130 Million" on a single line inside this column. */
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
  text-shadow: 0 6px 40px rgba(42, 39, 233, 0.5);
}
.result-hero__rule {
  width: 64px; height: 2px;
  margin: 1.5rem 0;
  background: linear-gradient(to right, var(--blue-400), transparent);
}
.result-hero__desc { max-width: 32ch; color: var(--grey-300); }

.legal-note--tight { margin-top: 0; font-size: 0.76rem; max-width: none; }

/* ---- Scrollable results panel ---- */
.results-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}
.results-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.results-panel__title {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.results-panel__hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.results-panel__hint {
  transition: opacity 0.4s var(--ease);
}
.results-panel__hint::after {
  content: "";
  width: 1px; height: 14px;
  background: currentColor;
  animation: hintdrop 1.8s var(--ease) infinite;
}
/* Stop nagging once the list has actually been scrolled through. */
.results-panel__hint.is-done { opacity: 0; }
@keyframes hintdrop {
  0%, 100% { opacity: 0.25; transform: translateY(-3px); }
  50%      { opacity: 1;    transform: translateY(3px); }
}

.results-scroller {
  /* Tied to the feature card, so the list scrolls rather than stretching the
     section, and keeps working unchanged as more results are added. */
  max-height: clamp(260px, 34vh, 380px);
  overflow-y: auto;
  /* Must chain, NOT contain. `contain` traps the wheel here: because
     data-lenis-prevent hands these events to native scrolling, a visitor who
     reached the bottom of the list would find the wheel dead over this panel.
     `auto` lets the page take over once the list is exhausted. */
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-500) transparent;
  /* Fade the cut-off edges so it reads as scrollable, not clipped. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
}
.results-scroller::-webkit-scrollbar { width: 4px; }
.results-scroller::-webkit-scrollbar-track { background: transparent; }
.results-scroller::-webkit-scrollbar-thumb {
  background: var(--blue-500);
  border-radius: 999px;
}

/* Revealed once the list above has been scrolled to its end. Visible by
   default so it still works with JS off; .js hides it until earned. */
.results-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.js .results-more > .btn {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js .results-more.is-visible > .btn {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.result-list { display: grid; }
.result-item {
  position: relative;
  padding: clamp(1.35rem, 2.5vw, 1.9rem) 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: padding-left 0.4s var(--ease);
}
.result-item:last-child { border-bottom: 0; }
.result-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  translate: 0 -50%;
  width: 2px; height: 0;
  background: var(--blue-500);
  transition: height 0.45s var(--ease);
}
.result-item:hover { padding-left: 1.1rem; }
.result-item:hover::before { height: 62%; }
.result-item__figure {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.result-item__figure .count { color: var(--blue-400); }
.result-item__type {
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-300);
}
.result-item__note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--grey-500);
}

/* ---------- Intro ------------------------------------------------------ */
.intro {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background: var(--navy-900);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.intro-points {
  display: grid;
  gap: 0.9rem;
  margin-block: 2rem;
}
.intro-points li {
  position: relative;
  padding-left: 2rem;
  color: var(--grey-300);
}
.intro-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  background: var(--blue-500);
  transform: rotate(45deg);
}
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

.intro-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: end;
}
.attorney-card {
  position: relative;
  background: linear-gradient(to top, var(--navy-800), rgba(16, 36, 94, 0));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Keeps its stagger offset while the parallax bus adds --py on top. */
.attorney-card--offset { transform: translate3d(0, calc(-2.5rem + var(--py, 0px)), 0); }
.attorney-card img {
  width: 100%;
  aspect-ratio: 13 / 20;
  object-fit: cover;
  object-position: top center;
}
.attorney-card figcaption {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.15rem 1.15rem;
}
.attorney-card figcaption strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
}
.attorney-card figcaption span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-400);
}

/* ---------- No fee band ------------------------------------------------ */
.nofee {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background:
    linear-gradient(rgba(5, 12, 34, 0.88), rgba(5, 12, 34, 0.94)),
    url("../assets/img/bg1.jpg") center / cover no-repeat;
  background-attachment: scroll;
  text-align: center;
}
.nofee-kicker {
  font-size: var(--step--1);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-bottom: 1.25rem;
}
.nofee-line {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.02;
  color: var(--white);
}
.nofee-line em {
  display: block;
  font-style: italic;
  color: var(--blue-400);
}
.nofee-sub {
  max-width: 46ch;
  margin: 1.5rem auto 2.25rem;
  color: var(--grey-300);
}

/* ---------- Practice areas --------------------------------------------- */
.practice {
  padding-block: clamp(4.5rem, 9vw, 8.5rem) 0;
  background: var(--navy-950);
}
.practice-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.pa { position: relative; }
.pa-link {
  position: relative;
  display: block;
  height: clamp(360px, 38vw, 520px);
  overflow: hidden;
  isolation: isolate;
}
/* The supplied practice-area artwork is low-res and already tinted blue, so
   it is used as texture rather than as photography. Raise --pa-photo to ~0.85
   and drop the scrim opacity once real photography is supplied. */
.pa { --pa-photo: 0.55; }
.pa-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: var(--pa-photo);
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.pa-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(5, 12, 34, 0.95) 6%, rgba(11, 26, 72, 0.4) 55%, rgba(11, 26, 72, 0.12) 100%);
  transition: opacity 0.5s var(--ease);
}
/* Hairlines instead of hard gutters — reads as one continuous band. */
.pa-link::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 3;
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.pa:last-child .pa-link::after { display: none; }

.pa-link:hover .pa-img,
.pa-link:focus-visible .pa-img { transform: scale(1.06); opacity: calc(var(--pa-photo) + 0.24); }

.pa-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: block;
  padding: clamp(1.25rem, 2vw, 1.9rem);
  text-align: center;
}
.pa-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}
.pa-title em { display: block; font-style: normal; }
/* Small rule under the title, standing in for the dots the old artwork used. */
.pa-title::after {
  content: "";
  display: block;
  width: 34px; height: 2px;
  margin: 0.9rem auto 0;
  background: var(--blue-500);
  transition: width 0.5s var(--ease);
}
.pa-link:hover .pa-title::after { width: 58px; }
.pa-text {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--grey-300);
  opacity: 0;
  transition: max-height 0.6s var(--ease), opacity 0.4s var(--ease),
              margin-top 0.6s var(--ease);
}
.pa-link:hover .pa-text,
.pa-link:focus-visible .pa-text {
  max-height: 14rem;
  opacity: 1;
  margin-top: 0.9rem;
}
.pa-more {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.pa-more::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.35rem;
  background: currentColor;
  transform: scaleX(0.4);
  transition: transform 0.45s var(--ease);
}
.pa-link:hover .pa-more::after { transform: scaleX(1); }

/* ---------- Video ------------------------------------------------------ */
.videoblock {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background: var(--navy-900);
}
.video-frame {
  max-width: 980px;
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
}
.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
}
.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 12, 34, 0.35);
  transition: background-color 0.4s var(--ease);
}
.video-facade:hover img { transform: scale(1.04); }
.video-facade:hover::before { background: rgba(5, 12, 34, 0.15); }
.video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  background: var(--blue-500);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(42, 39, 233, 0.55);
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
  animation: pulse 2.6s ease-out infinite;
}
.video-play svg { width: 42%; height: 42%; fill: var(--white); margin-left: 8%; }
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(42, 39, 233, 0.5); }
  70%  { box-shadow: 0 0 0 28px rgba(42, 39, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(42, 39, 233, 0); }
}
.video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Compensation ----------------------------------------------- */
.compensation {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background: var(--navy-950);
}
.promise-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.promise-row li {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--navy-950);
  text-align: center;
}
.promise-row span {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.promise-row strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}

/* ---------- Contact ---------------------------------------------------- */
.contact {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background:
    linear-gradient(rgba(5, 12, 34, 0.93), rgba(11, 26, 72, 0.97)),
    url("../assets/img/subheader.jpg") center / cover no-repeat;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-lede { max-width: 38ch; margin-bottom: 2.5rem; }
.contact-details { display: grid; gap: 1.5rem; }
.contact-details__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 0.35rem;
}
.contact-details__value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white);
  transition: color 0.25s var(--ease);
}
a.contact-details__value:hover { color: var(--blue-400); }

.contact-form {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.field { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-300);
}
.field .req { color: var(--blue-400); letter-spacing: 0.08em; }
.field input,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgba(5, 12, 34, 0.55);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--grey-500); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  background: rgba(5, 12, 34, 0.8);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #ff6b57; }
.field-error { font-size: 0.8rem; color: #ff8b7a; letter-spacing: 0; text-transform: none; }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--blue-500); }
.field--check label {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--grey-400);
}
.field--check .field-error { grid-column: 1 / -1; }

/* Honeypot — hidden from people, visible to naive bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--grey-500);
}
.form-status:not(:empty) {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  font-size: 0.9rem;
}
.form-status.is-ok { background: rgba(42, 39, 233, 0.2); color: var(--white); }
.form-status.is-error { background: rgba(255, 107, 87, 0.15); color: #ff8b7a; }

/* ---------- Reviews ---------------------------------------------------- */
.reviews {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background: var(--navy-950);
}
.reviews-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.stars { color: #f5b731; letter-spacing: 0.15em; font-size: 1.1rem; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.review {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, rgba(16, 36, 94, 0.6), rgba(11, 26, 72, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.review:hover { transform: translateY(-6px); border-color: rgba(76, 74, 240, 0.55); }
.review blockquote { display: grid; gap: 1rem; }
.review-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.review blockquote p:not(.review-title) { font-size: 0.95rem; line-height: 1.7; }
.review-author {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-400);
}

/* ---------- Final CTA -------------------------------------------------- */
.finalcta {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  background:
    linear-gradient(rgba(5, 12, 34, 0.82), rgba(5, 12, 34, 0.95)),
    url("../assets/img/hero-poster.jpg") center / cover no-repeat;
  text-align: center;
}
.finalcta-line {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.finalcta-line em { display: block; font-style: italic; color: var(--blue-400); }
.finalcta-sub {
  max-width: 44ch;
  margin: 1.5rem auto 2.5rem;
  color: var(--grey-300);
}
.finalcta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .results-grid { grid-template-columns: 1fr; }
  .result-hero { min-height: 300px; }
  .results-scroller { max-height: 320px; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { max-width: 520px; }
  .attorney-card--offset { transform: none; }
  .practice-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .review { gap: 1.25rem; }
}

@media (max-width: 760px) {
  .hero { padding-top: calc(var(--header-h) + 2.5rem); }

  /* The interlocked stagger needs width. Below this it becomes a plain
     centred stack, with the rule-lines kept as separators. */
  .hero-title {
    --hero-size: clamp(2.2rem, 13.6vw, 5rem);
    text-align: center;
  }
  .hero-line {
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
  .hero-line--b { margin-top: 0.3rem; }
  .hero-line--c { margin-top: 0.3rem; justify-content: center; }
  .hero-meta { width: 100%; }
  .hero-meta__text { letter-spacing: 0.2em; }
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(5, 12, 34, 0.97) 10%, rgba(5, 12, 34, 0.75) 60%, rgba(5, 12, 34, 0.6) 100%);
  }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-scroll { display: none; }

  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .pa-link { height: 260px; }
  /* No hover on touch — show the copy up front. */
  .pa-text { max-height: none; opacity: 1; margin-top: 0.75rem; display: none; }

  /* Centred body copy is hard work on a narrow column. */
  .prose--center { text-align: left; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .promise-row { grid-template-columns: 1fr; }
  .finalcta-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 460px) {
  /* Stays 2-up: six full-width cards would be ~1700px of near-identical
     scrolling before the visitor reaches the form. */
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .pa-link { height: 200px; }
  .pa-body { padding: 1rem 0.65rem; }
  .pa-title { font-size: 0.95rem; letter-spacing: 0.04em; }
  .pa-title::after { margin-top: 0.6rem; width: 26px; }
  .pa-more { margin-top: 0.65rem; font-size: 0.62rem; letter-spacing: 0.16em; }
  .intro-media { grid-template-columns: 1fr 1fr; }
}

/* ---- Contact: call-us callout + bottom detail strip (client request) ---- */
.contact-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-top: 1.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.contact-callout a {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white);
  transition: color 0.25s var(--ease);
}
.contact-callout a:hover { color: var(--blue-400); }

.contact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  overflow: hidden;
}
.contact-strip > div {
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: var(--navy-900);
  text-align: center;
}
.contact-strip span {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.contact-strip strong,
.contact-strip a {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.contact-strip a { transition: color 0.25s var(--ease); }
.contact-strip a:hover { color: var(--blue-400); }

@media (max-width: 760px) {
  .contact-strip { grid-template-columns: 1fr; }
  .contact-callout a { font-size: 1.6rem; }
}

/* ---- Contact: office ambiance photo filling the left column ---- */
.contact-photo {
  margin-top: 2.25rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.contact-photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s var(--ease);
}
.contact-photo:hover img { transform: scale(1.04); }
@media (max-width: 1024px) {
  .contact-photo { display: none; } /* single column: the form follows directly */
}