/* Transactional page (`/transactional`) — accurate, efficient, speedy.

   The brand layer (`brand-firm.css`) owns the palette, the serif, the card,
   and the hero glow; this file places them and adds the two pieces of motion
   the page's argument rests on: the turnaround dial, which sweeps a real
   published commitment, and the pipeline pulse, which shows legal work running
   *inside* a sales stage rather than after it.

   Both are decoration. The dial's figure, unit, and qualifier are text inside
   the dial; the pipeline's stages are an ordered list. The
   `prefers-reduced-motion` block at the bottom settles everything. */

/* The dial sweep is a conic gradient whose angle animates. Registering the
   custom property is what makes an angle interpolable at all — without
   `@property` the browser would jump from 0deg to 360deg. */
/* ---- Hero -------------------------------------------------------------- */

.speed-hero {
  position: relative;
  /* `.speed-hero__glow` bleeds 25vw past each edge on purpose; without a clip
     here that bleed becomes real layout width, which is what put a
     horizontal scrollbar under every phone-width visit to this page. */
  overflow: hidden;
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
}

@media (min-width: 60rem) {
  .speed-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

.speed-hero__glow {
  inset-inline: -25vw;
}

.speed-hero__statement {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 40rem;
}

.speed-hero__mark {
  width: clamp(4.25rem, 9vw, 6.5rem);
  height: clamp(4.25rem, 9vw, 6.5rem);
  padding: 1rem;
  border: 1px solid var(--firm-brand-edge);
  border-radius: 50%;
  color: var(--firm-brand);
  background: var(--firm-brand-tint);
  box-shadow: 0 1rem 3rem var(--firm-brand-glow);
}

/* The three words are still one sentence in the markup — each sits in its own
   `span` for the accent colour, not for motion, so a screen reader and search
   still read one unbroken string. The heading keeps its single entrance
   animation rather than staggering per word the way `/litigation` does. */
.speed-hero__heading {
  margin: 0;
  font-family: var(--firm-serif);
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  animation: speed-heading-in 650ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* The word gap is a margin rather than a space in the markup, the same
   convention `/litigation`'s `.zeal-word` uses: each word is its own
   inline-block so its colour can be set alone, and an inline-block collapses
   the whitespace at its own end. */
.speed-word {
  display: inline-block;
  margin-inline-end: 0.28em;
}

.speed-word--accent {
  color: var(--firm-brand);
}

@keyframes speed-heading-in {
  from {
    /* Hero copy stays opaque throughout its entrance. Fading normal-size
       text composites it with the dark ground below the WCAG contrast floor
       before the animation completes. */
    transform: translateY(0.4rem);
  }
  to {
    transform: translateY(0);
  }
}

.speed-hero__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
  animation: speed-heading-in 650ms cubic-bezier(0.16, 1, 0.3, 1) 120ms backwards;
}

.nav-theme a.nav-btn--primary.speed-hero__cta,
.nav-theme a.nav-btn--primary.speed-hero__cta:hover,
.nav-theme a.nav-btn--primary.speed-hero__cta:focus-visible {
  border-color: var(--firm-brand);
  background: var(--firm-brand);
  color: var(--firm-on-brand);
}

.nav-theme a.nav-btn--primary.speed-hero__cta:hover,
.nav-theme a.nav-btn--primary.speed-hero__cta:focus-visible {
  border-color: var(--firm-brand-strong);
  background: var(--firm-brand-strong);
}

/* ---- The day-rate mark -------------------------------------------------- */

/* Fills the hero's second grid column — the slot the retired turnaround dial
   used to occupy — with the base package's published day rate, drawn as a
   bill glyph rather than only stated in the fee section's blurb sentence. */
.speed-hero__rate {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  justify-self: center;
}

@media (min-width: 60rem) {
  .speed-hero__rate {
    display: flex;
  }
}

.speed-hero__rate-mark {
  width: clamp(9rem, 16vw, 13rem);
  height: auto;
  filter: drop-shadow(0 1rem 2rem var(--firm-brand-glow));
}

.speed-hero__rate-caption {
  margin: 0;
  font-family: var(--firm-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--firm-brand);
}

/* ---- Accurate · Efficient · Speedy ------------------------------------- */

.speed-virtues {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .speed-virtues {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The cards share a `neon-card` shell but reset its stacking margin, since the
   grid owns the gap here. */
.speed-virtue {
  margin: 0;
  animation: speed-virtue-in 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(220ms + var(--speed-virtue-index, 0) * 110ms);
  transition: transform 200ms ease-out, border-color 200ms ease-out;
}

.speed-virtue:hover {
  transform: translateY(-4px);
  border-color: var(--firm-brand);
}

@keyframes speed-virtue-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.speed-virtue__word {
  margin: 0 0 0.5rem;
  font-family: var(--firm-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--firm-brand);
}

.speed-virtue__body {
  margin: 0;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
}

/* ---- Shared section furniture ------------------------------------------ */

.speed-heading {
  margin: 0 0 0.75rem;
  font-family: var(--firm-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
}

.speed-subheading {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--firm-brand);
}

.speed-paragraph {
  margin: 0 0 0.85rem;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--nav-color-text-muted);
}

.speed-paragraph:last-child {
  margin-bottom: 0;
}

/* ---- The fee ----------------------------------------------------------- */

.speed-fee {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .speed-fee {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3rem;
  }
}

/* The MSA definition. A term the page makes a commitment about gets spelled
   out where the commitment is made, not in a glossary somewhere else. */
.speed-definition {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  border-inline-start: 2px solid var(--firm-brand);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--firm-brand-tint);
}

.speed-definition__term {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.speed-definition__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nav-color-text-muted);
}

.speed-included {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.speed-included__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  animation: speed-item-in 500ms ease-out backwards;
  animation-delay: calc(var(--speed-item-index, 0) * 80ms);
}

/* The tick is drawn rather than lettered, so it carries no glyph a screen
   reader would announce. */
.speed-included__tick {
  flex: none;
  width: 1.25rem;
  aspect-ratio: 1;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--firm-brand-tint);
  box-shadow: inset 0 0 0 1px var(--firm-brand-edge);
  position: relative;
}

.speed-included__tick::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.4rem;
  inset-block-start: 0.24rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--firm-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@keyframes speed-item-in {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.speed-included__name {
  margin: 0 0 0.15rem;
  font-weight: 600;
}

.speed-included__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nav-color-text-muted);
}

/* ---- The sales-cycle pipeline ------------------------------------------ */

/* Two layouts, and the narrow one is the default.
   Stacked, the stages read as a vertical rail — the same shape the litigation
   page's phase rail uses, so the two pages agree about what a sequence looks
   like. Wide, they become four columns under one horizontal rail with the pulse
   crossing it.
   The stacked case used to inherit the wide geometry: a horizontal rail above a
   vertical list, with each stage's node floated 1.6rem above its own text,
   which put every node against the *previous* stage's paragraph. The nodes were
   in a line, just not the line the reader was reading. */
.speed-pipeline {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin: 1.75rem 0 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

/* The rail. Vertical by default, spanning the stages it threads. */
.speed-pipeline::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0.4rem;
  width: 2px;
  border-radius: 999px;
  background: var(--firm-brand-edge);
}

@media (min-width: 56rem) {
  .speed-pipeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 2rem 0 0;
  }

  /* Horizontal, across the top of the columns. */
  .speed-pipeline::before {
    inset-block: auto;
    inset-block-start: 0.45rem;
    inset-inline: 0;
    width: auto;
    height: 2px;
  }
}

/* The pulse: one dot crossing the whole pipeline. This is the page's argument
   in a single element — the legal step travels with the deal instead of
   stopping it. */
/* Hidden in the stacked layout: it travels along the inline axis, which is the
   rail's axis only once the stages are columns. A dot sliding across the top of
   a vertical list is motion about nothing. */
.speed-pipeline__pulse {
  display: none;
}

@media (min-width: 56rem) {
  .speed-pipeline__pulse {
    display: block;
    position: absolute;
    inset-block-start: 0.1rem;
    inset-inline-start: 0;
    width: 0.75rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--firm-brand);
    box-shadow: 0 0 0 4px var(--firm-brand-tint);
    animation: speed-pulse-travel 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
}

@keyframes speed-pulse-travel {
  0% {
    inset-inline-start: 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    inset-inline-start: calc(100% - 0.75rem);
    opacity: 0;
  }
}

.speed-stage {
  position: relative;
}

/* Beside the stage name, on the rail. The offsets put its centre on the rail's
   centre line and its middle on the name's first line, so it marks the stage it
   belongs to rather than floating between two of them. */
.speed-stage__node {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: -1.81rem;
  width: 0.75rem;
  aspect-ratio: 1;
  border: 2px solid var(--firm-brand-edge);
  border-radius: 999px;
  background: var(--nav-color-surface);
  animation: speed-node-light 6s ease-in-out infinite;
  animation-delay: calc(var(--speed-stage-index, 0) * 1.4s);
}

@media (min-width: 56rem) {
  .speed-stage {
    padding-top: 1.5rem;
  }

  .speed-stage__node {
    inset-block-start: -1.6rem;
    inset-inline-start: 0;
  }
}

@keyframes speed-node-light {
  0%,
  6% {
    border-color: var(--firm-brand-edge);
    background: var(--nav-color-surface);
  }
  14%,
  40% {
    border-color: var(--firm-brand);
    background: var(--firm-brand);
  }
  62%,
  100% {
    border-color: var(--firm-brand-edge);
    background: var(--nav-color-surface);
  }
}

.speed-stage__name {
  margin: 0 0 0.3rem;
  font-family: var(--firm-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}

.speed-stage__legal {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nav-color-text-muted);
}

/* ---- Priced separately ------------------------------------------------- */

.speed-separate__list {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .speed-separate__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.speed-separate__item {
  padding: 1.25rem;
  border: 1px solid var(--neon-card-border);
  border-radius: 0.75rem;
  transition: transform 180ms ease-out, background-color 180ms ease-out;
}

.speed-separate__item:hover {
  transform: translateY(-3px);
  background-color: var(--firm-brand-tint);
}

.speed-separate__name {
  margin: 0 0 0.4rem;
  font-family: var(--firm-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.speed-separate__link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--firm-brand);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* ---- Scroll-driven reveals --------------------------------------------- */

/* The range ends at `entry 100%` — the moment the card is wholly inside the
   scrollport — rather than inside `cover`, which needs scroll progress a short
   document or a tall window may never have. See the same note in
   `litigation.css`. */
@supports (animation-timeline: view()) {
  .speed-separate__item,
  .speed-virtue {
    animation: speed-card-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes speed-card-in {
    from {
      opacity: 0.45;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Motion is decoration here, never information: with it suppressed the dial
   rests filled, the pipeline stays lit, and every figure and sentence on the
   page reads exactly the same. */
@media (prefers-reduced-motion: reduce) {
  .speed-hero__heading,
  .speed-hero__lead,
  .speed-virtue,
  .speed-included__item,
  .speed-separate__item {
    opacity: 1;
    transform: none;
    animation: none;
  }


  .speed-pipeline__pulse {
    display: none;
  }

  .speed-stage__node {
    border-color: var(--firm-brand);
    background: var(--firm-brand);
    animation: none;
  }

  .speed-virtue:hover,
  .speed-separate__item:hover {
    transform: none;
  }
}