/* Martin Law Offices PLLC, v4. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

/* Headings sit at zero tracking with a touch of extra word-spacing. Negative
   tracking on a serif at display size is what was closing the gaps between
   words; this errs the other way on purpose. */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
  word-spacing: 0.05em;
  color: var(--navy);
  font-optical-sizing: auto;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- masthead ----------
   A full-width bar on a hairline, not a floating pill. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 237, 0.84);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}

.masthead[data-scrolled="true"] {
  border-bottom-color: var(--rule);
  background: rgba(247, 244, 237, 0.95);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  min-height: 2.75rem;
}

.wordmark img {
  width: auto;
  height: 2.7rem;
  flex: none;
}

.wordmark b {
  display: block;
  font-family: var(--display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.wordmark i {
  display: block;
  font-style: normal;
  font-family: var(--body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-ink);
  white-space: nowrap;
  margin-top: 1px;
}

@media (max-width: 26rem) {
  .wordmark i {
    display: none;
  }
}

.nav {
  display: none;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
  }
}

.nav a {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-muted);
  padding-block: var(--space-xs);
  transition: color var(--dur-hover) var(--ease-out);
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-ui) var(--ease-out);
}

.nav a:hover,
.nav a[data-active="true"] {
  color: var(--navy);
}

.nav a:hover::after,
.nav a[data-active="true"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

#menuBtn {
  display: inline-flex;
}

@media (min-width: 64rem) {
  #menuBtn {
    display: none;
  }
}

@media (max-width: 63.99rem) {
  .bar > .btn--nav {
    display: none;
  }
}

/* The id selector outranks [hidden]'s display:none, so it is restated here. */
#mobileNav[hidden] {
  display: none;
}

@media (min-width: 64rem) {
  #mobileNav {
    display: none !important;
  }
}

#mobileNav {
  display: grid;
  padding-bottom: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--rule-soft);
}

#mobileNav a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--rule-soft);
}

#mobileNav a:last-child {
  border-bottom: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 3.1rem;
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-core);
  font-family: var(--body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--solid {
  background: var(--navy);
  color: var(--paper);
}

.btn--solid:hover {
  background: var(--navy-deep);
}

.btn--gold {
  background: var(--gold);
  color: var(--navy-deep);
}

.btn--gold:hover {
  background: var(--gold-lit);
}

.btn--line {
  border-color: var(--rule);
  color: var(--navy);
}

.btn--line:hover {
  border-color: var(--navy);
  background: var(--paper-2);
}

/* Ghost: hairline border, and a gold fill that wipes in from the left on
   hover. Enters left, exits right, same trick as the nav underline, so the
   two read as one family. The arrow points down because the button does. */
.btn--ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--rule);
  color: var(--navy);
}

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-ui) var(--ease-out);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--gold);
  color: var(--navy-deep);
}

.btn--ghost:hover::before,
.btn--ghost:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn--nav {
  min-height: 2.75rem;
  font-size: var(--text-2xs);
}

.btn__cap {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-hover) var(--ease-out);
}

.btn__cap svg {
  width: 100%;
  height: 100%;
}

.btn:hover .btn__cap {
  transform: translateX(3px);
}

.btn:hover .btn__cap--down {
  transform: translateY(3px);
}

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

.hero {
  position: relative;
  padding-block: var(--space-4xl) var(--space-3xl);
  overflow-x: clip;
}

/* ---------- aurora ----------
   The 21st.dev aceternity aurora-background, re-inked for a paper ground:
   the same two stacked repeating-linear-gradient layers under a 10px blur,
   masked to the portrait corner, with the top layer drifting on a slow loop.
   The rainbow stripes become navy and gold at low alpha, and the light-mode
   invert trick is dropped because the brand colors must survive as
   themselves. */

.hero__aurora {
  /* Fixed to the viewport so the aurora runs the whole page, sitting
     behind every section (dark bands still paint over it). */
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.hero__aurora::before,
.hero__aurora::after {
  content: "";
  position: absolute;
  inset: -10px;
  --stripes: repeating-linear-gradient(
    100deg,
    var(--paper) 0%,
    var(--paper) 7%,
    transparent 10%,
    transparent 12%,
    var(--paper) 16%
  );
  --aurora: repeating-linear-gradient(
    100deg,
    rgba(42, 79, 184, 0.42) 10%,
    rgba(243, 205, 67, 0.38) 15%,
    rgba(95, 116, 173, 0.35) 20%,
    rgba(213, 159, 37, 0.30) 25%,
    rgba(0, 51, 153, 0.40) 30%
  );
  background-image: var(--stripes), var(--aurora);
  background-size: 300% 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px);
  mask-image: radial-gradient(ellipse at 100% 0%, black 26%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 26%, transparent 90%);
  opacity: 0.85;
}

.hero__aurora::after {
  background-size: 200% 100%;
  mix-blend-mode: soft-light;
  opacity: 1;
  animation: aurora-drift 60s linear infinite;
  will-change: background-position;
}

@keyframes aurora-drift {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}

/* One soft gold field behind the portrait side. Static, no loop. */
.hero__wash {
  position: absolute;
  top: -22%;
  right: -14%;
  width: min(50rem, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(213, 159, 37, 0.17), transparent 62%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.hero > .shell {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: var(--space-4xl);
  }
}

.eyebrow {
  font-family: var(--body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

h1 {
  font-size: var(--text-display);
  line-height: 1.12;
  margin-block: var(--space-lg) 0;
  max-width: 16ch;
}

/* The one accented phrase. Gold italic, once per section at most. */
h1 em,
h2 em {
  font-style: italic;
  color: var(--gold-ink);
}

.stmt em {
  font-style: italic;
  color: var(--gold-lit);
}

.hero__lede {
  margin-top: var(--space-lg);
  max-width: 50ch;
  font-size: var(--text-lg);
  color: var(--navy-2);
}

.hero__lede b {
  color: var(--navy);
  font-weight: 600;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* ---------- portrait, with the drawn frame ----------
   Deliberately NOT the orbiting conic beam on the Pernick site. Here two gold
   rules are DRAWN around the portrait by animating stroke-dashoffset on an
   SVG rect, so the border reads as a line being ruled onto the page rather
   than a light travelling around it. Once the frame lands, a single short
   dash walks the perimeter: crisp hairline, no blur, no cast light. */

.portrait {
  position: relative;
  padding: 0.75rem;
}

.portrait__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.portrait__frame rect {
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* Outer rule, drawn in from the top-left corner. Slow on purpose: the line
   should read as a hand ruling the frame onto the page, not a UI transition. */
.portrait__frame .draw {
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: var(--len, 2400);
  transition: stroke-dashoffset 4.5s var(--ease-expo-out);
}

.portrait[data-in="true"] .portrait__frame .draw {
  stroke-dashoffset: 0;
}

/* Inner hairline, a beat later and from the opposite direction. */
.portrait__frame .draw--inner {
  stroke: var(--navy);
  stroke-width: 1;
  opacity: 0.3;
  stroke-dashoffset: calc(var(--len, 2400) * -1);
  transition-delay: 0.6s;
}

.portrait__frame .tracer {
  stroke: var(--gold-lit);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 34 4000;
  opacity: 0;
  animation: trace 11s linear infinite;
  animation-play-state: paused;
}

.portrait[data-in="true"] .portrait__frame .tracer {
  opacity: 1;
  animation-play-state: running;
  transition: opacity 0.4s linear 4.5s;
}

@keyframes trace {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: calc(var(--len, 2400) * -1);
  }
}

.portrait__core {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}

.portrait__core img {
  width: 100%;
  aspect-ratio: 4 / 4.5;
  max-height: 31rem;
  object-fit: cover;
  object-position: center 14%;
}

.portrait__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-2xl) var(--space-lg) var(--space-md);
  background: linear-gradient(to top, rgba(0, 31, 92, 0.9), transparent);
  color: var(--paper);
}

.portrait__cap b {
  display: block;
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--paper);
}

.portrait__cap span {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-top: 3px;
}

/* ---------- ledger ---------- */

.ledger {
  background: var(--navy);
  color: var(--paper);
}

.ledger__row {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
  display: grid;
}

@media (min-width: 48rem) {
  .ledger__row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ledger__cell {
  padding: var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--rule-lit-2);
}

@media (min-width: 48rem) {
  .ledger__cell {
    padding: var(--space-xl) var(--space-lg) var(--space-xl) 0;
    border-bottom: 0;
    border-right: var(--rule-hair) solid var(--rule-lit-2);
  }

  .ledger__cell + .ledger__cell {
    padding-left: var(--space-lg);
  }

  .ledger__cell:last-child {
    border-right: 0;
  }
}

.ledger__cell:last-child {
  border-bottom: 0;
}

.ledger__k {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: var(--space-xs);
}

.ledger__v {
  display: block;
  font-family: var(--display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.15;
  color: var(--paper);
}

.ledger__v small {
  display: block;
  font-family: var(--body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(247, 244, 237, 0.68);
  margin-top: var(--space-2xs);
}

/* ---------- sections ---------- */

.sec {
  position: relative;
  padding-block: var(--space-5xl);
}

.sec--tint {
  background: var(--paper-2);
}

.sec--dark {
  background: var(--navy);
  color: var(--paper);
}

.sec--dark h2,
.sec--dark h3 {
  color: var(--paper);
}

.sec--dark .eyebrow {
  color: var(--gold-lit);
}

.sec--dark .lede,
.sec--dark p {
  color: rgba(247, 244, 237, 0.8);
}

.sec__head {
  max-width: 46rem;
}

.sec__head h2 {
  font-size: var(--text-display-s);
  margin-block: var(--space-md) var(--space-lg);
}

.lede {
  font-size: var(--text-lg);
  color: var(--navy-2);
  max-width: 58ch;
}

/* ---------- statement band ---------- */

.stmt {
  padding-block: var(--space-4xl);
  background: var(--navy-deep);
  color: var(--paper);
}

.stmt p {
  font-family: var(--display);
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: 1.32;
  word-spacing: 0.05em;
  max-width: 32ch;
  color: var(--paper);
}

/* ---------- fair fund band ----------
   Navy-deep like the statement band, but numeric where that one is
   typographic: the court appointment, counted out in full. */

.fund {
  background: var(--navy-deep);
  color: var(--paper);
  padding-block: var(--space-4xl);
  overflow-x: clip;
}

.fund__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 62rem) {
  .fund__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-4xl);
  }
}

.fund__k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: var(--space-sm);
}

.fund__figure {
  font-family: var(--display);
  font-size: clamp(2.7rem, 1.3rem + 5.4vw, 5.4rem);
  font-weight: 600;
  line-height: 1.04;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.fund__cap {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(247, 244, 237, 0.66);
}

.fund__body p {
  color: rgba(247, 244, 237, 0.82);
  max-width: 46ch;
}

.fund__body p + p {
  margin-top: var(--space-md);
}

.fund__body b {
  color: var(--paper);
}

/* ---------- practice rail ----------
   Numbered entries divided by gold rules that draw in as each row lands.
   A different shape from the meeting timeline further down, on purpose. */

.rail {
  margin-top: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--rule-soft);
}

.rail__row {
  position: relative;
  display: grid;
  gap: var(--space-sm) var(--space-2xl);
  padding-block: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--rule-soft);
  align-items: start;
}

/* Hover slides the row's cells, not its padding: padding animates layout and
   reflows the grid every frame, which is why the old hover felt rigid. The
   cells drift on transform with a small cascade and settle back together. */
.rail__row > * {
  transition: transform 0.5s var(--ease-soft-out);
}

@media (min-width: 56rem) {
  .rail__row {
    grid-template-columns: 4rem 20rem 1fr;
  }
}

/* The gold rule under each row draws left to right as the row arrives. */
.rail__row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-expo-out);
}

.rail__row[data-in="true"]::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .rail__row:hover > * {
    transform: translateX(0.75rem);
  }

  .rail__row:hover > *:nth-child(2) {
    transition-delay: 45ms;
  }

  .rail__row:hover > *:nth-child(3) {
    transition-delay: 90ms;
  }
}

.rail__num {
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

.rail__row h3 {
  font-size: var(--text-3xl);
}

.rail__row p {
  color: var(--navy-2);
  max-width: 56ch;
}

.rail__meta {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ---------- two-up cards ---------- */

.duo {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 56rem) {
  .duo {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--rule-soft);
  background: var(--white);
  /* Glow hue swaps per variant: paper cards cast navy, navy cards cast gold
     (the 21st.dev glowing-shadow, re-inked from its rainbow hue-cycle to the
     two brand inks). Box-shadows, not a blurred pseudo-element, so the glow
     stays strictly OUTSIDE the card: a negative z-index child would paint on
     top of the card's own background and wash the text. */
  --glow-a: rgba(42, 79, 184, 0.55);
  --glow-b: rgba(0, 51, 153, 0.38);
  transition: transform var(--dur-panel) var(--ease-out),
    border-color var(--dur-panel) var(--ease-out),
    box-shadow var(--dur-panel) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 79, 184, 0.4);
    box-shadow: 0 18px 40px -30px rgba(0, 51, 153, 0.6),
      0 0 30px -4px var(--glow-a), 0 16px 64px -10px var(--glow-b);
    animation: card-glow-pulse 3.4s ease-in-out 0.4s infinite;
  }

  .card--navy:hover {
    border-color: var(--gold);
  }
}

/* The slow breathing the original gets from its orbiting glow spot. */
@keyframes card-glow-pulse {
  0%,
  100% {
    box-shadow: 0 18px 40px -30px rgba(0, 51, 153, 0.6),
      0 0 26px -6px var(--glow-a), 0 16px 58px -12px var(--glow-b);
  }
  50% {
    box-shadow: 0 18px 40px -30px rgba(0, 51, 153, 0.6),
      0 0 44px 0px var(--glow-a), 0 20px 80px -6px var(--glow-b);
  }
}

.card__tag {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-muted);
  margin-bottom: var(--space-md);
}

.card h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

.card p {
  color: var(--navy-2);
}

.card--navy {
  background: var(--navy);
  border-color: var(--navy);
  --glow-a: rgba(243, 205, 67, 0.55);
  --glow-b: rgba(213, 159, 37, 0.45);
}

.card--navy h3 {
  color: var(--paper);
}

.card--navy .card__tag {
  color: var(--gold-lit);
}

.card--navy p {
  color: rgba(247, 244, 237, 0.8);
}

.card__meta {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.card--navy .card__meta {
  color: var(--gold-lit);
}

/* ---------- meeting timeline ----------
   Horizontal on desktop: gold nodes on a rule that fills across as the
   section arrives. A different shape from the practice rail above it. */

.timeline {
  margin-top: var(--space-3xl);
  position: relative;
  display: grid;
  gap: var(--space-2xl);
}

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

.timeline__line {
  display: none;
}

@media (min-width: 52rem) {
  .timeline__line {
    display: block;
    position: absolute;
    top: 0.44rem;
    inset-inline: 0;
    height: 2px;
    background: var(--rule-soft);
  }

  .timeline__line span {
    display: block;
    height: 100%;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s var(--ease-expo-out);
  }

  .timeline[data-in="true"] .timeline__line span {
    transform: scaleX(1);
  }

  /* A lit pulse that walks step one to step three on a loop, so the rule
     reads as a live path through the consultation rather than a divider.
     Runs constantly once the line has drawn in. */
  .timeline__line::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 16%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--gold-lit) 35%,
      #f6e6ac 50%,
      var(--gold-lit) 65%,
      transparent 100%
    );
    filter: drop-shadow(0 0 6px rgba(243, 205, 67, 0.9))
      drop-shadow(0 0 14px rgba(213, 159, 37, 0.45));
    opacity: 0;
    transform: translateX(-100%);
  }

  .timeline[data-in="true"] .timeline__line::after {
    opacity: 1;
    animation: beam-walk 4.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.6s infinite;
  }

  @keyframes beam-walk {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    8% {
      opacity: 1;
    }
    92% {
      opacity: 1;
    }
    100% {
      transform: translateX(625%);
      opacity: 0;
    }
  }
}

.step {
  position: relative;
  padding-top: var(--space-xl);
}

.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2px solid var(--gold);
  transform: scale(0);
  transition: transform var(--dur-panel) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 220ms + 400ms);
}

.timeline[data-in="true"] .step::before {
  transform: scale(1);
}

.step__k {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--space-xs);
}

.step h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

.step p {
  color: var(--navy-2);
}

/* ---------- accordion ---------- */

.acc {
  margin-top: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--rule-soft);
}

.acc__item {
  border-bottom: var(--rule-hair) solid var(--rule-soft);
}

.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  word-spacing: 0.05em;
  color: var(--navy);
  transition: color var(--dur-hover) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.acc__btn:hover {
  color: var(--gold-ink);
}

.acc__btn:active {
  transform: scale(0.995);
}

.acc__chev {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  margin-top: 0.3rem;
  color: var(--gold-ink);
  transition: transform var(--dur-panel) var(--ease-out);
}

.acc__btn[aria-expanded="true"] .acc__chev {
  transform: rotate(180deg);
}

/* grid-template-rows animates to the content's real height without measuring
   in JavaScript, and retargets cleanly if a second item is opened mid-flight. */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-panel) var(--ease-out);
}

.acc__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding-bottom: var(--space-lg);
  max-width: 62ch;
  color: var(--navy-2);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.acc__panel[data-open="true"] p {
  opacity: 1;
  transition-delay: 90ms;
}

/* The 21st.dev ruixen text-reveal-faqs treatment: when a panel opens, the
   answer's words sharpen out of a blur in reading order. The split is done in
   motion.js with the same word splitter the headings use; with reduced motion
   or JavaScript off the plain paragraph fade above still stands. */
.acc__panel .w {
  display: inline-block;
  opacity: 0;
  filter: blur(9px);
  transition: opacity 0.32s var(--ease-out), filter 0.32s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 16ms + 140ms);
}

.acc__panel[data-open="true"] .w {
  opacity: 1;
  filter: blur(0);
}

/* Closing resets instantly, so the reveal replays in full on the next open. */
.acc__panel[data-open="false"] .w {
  transition: none;
}

/* ---------- contact ---------- */

.contact__grid {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 56rem) {
  .contact__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-4xl);
  }
}

.details {
  display: grid;
  gap: var(--space-lg);
}

.details dt {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: var(--space-2xs);
}

.details dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--paper);
}

.details dd a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 1px solid var(--rule-lit-2);
  transition: border-color var(--dur-hover) var(--ease-out);
}

.details dd a:hover {
  border-color: var(--gold-lit);
}

.form {
  display: grid;
  gap: var(--space-md);
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.74);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  color: var(--paper);
  background: rgba(247, 244, 237, 0.06);
  border: var(--rule-hair) solid var(--rule-lit-2);
  border-radius: var(--radius-core);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--rule-lit);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-lit);
  background: rgba(247, 244, 237, 0.1);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(247, 244, 237, 0.44);
}

.form__row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 34rem) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Honeypot. Bots fill hidden fields; humans never see this one. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  font-size: var(--text-sm);
  color: rgba(247, 244, 237, 0.62);
}

.form__status {
  font-size: var(--text-sm);
  min-height: 1.5rem;
}

.form__status[data-state="ok"] {
  color: var(--gold-lit);
}

.form__status[data-state="err"] {
  color: #f2a897;
}

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

.footer {
  background: var(--navy-deep);
  color: rgba(247, 244, 237, 0.72);
  padding-block: var(--space-3xl) var(--space-xl);
  font-size: var(--text-sm);
}

.footer__grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 56rem) {
  .footer__grid {
    grid-template-columns: 1.1fr 0.8fr 1.6fr;
    gap: var(--space-3xl);
  }
}

.footer h4 {
  font-family: var(--body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: var(--space-md);
}

.footer a {
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}

.footer a:hover {
  color: var(--paper);
}

.footer li + li {
  margin-top: var(--space-2xs);
}

.footer__legal p + p {
  margin-top: var(--space-sm);
}

.footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--rule-lit-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  font-size: var(--text-xs);
}

/* ---------- motion ---------- */

.mask .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.mask .ln__i {
  display: block;
  transform: translateY(110%);
  will-change: transform;
  transition: transform var(--dur-mask) var(--ease-expo-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-line));
}

.mask[data-in="true"] .ln__i {
  transform: translateY(0);
}

/* ---------- typewriter hero ----------
   The 21st.dev preetsuthar17 typewriter, translated: characters land one at a
   time behind a blinking gold caret, type once and stay (no delete pass). A
   hidden ghost copy of the finished heading holds the layout, so nothing
   below the headline shifts while it types. With JavaScript off or reduced
   motion on, the heading simply stands there fully set. */

.type {
  position: relative;
}

.type__ghost {
  visibility: hidden;
}

.type__live {
  position: absolute;
  inset: 0;
}

.type__caret {
  display: inline-block;
  width: 0.05em;
  height: 0.74em;
  margin-left: 0.07em;
  background: var(--gold);
  vertical-align: -0.04em;
  animation: caret-blink 1.1s step-end infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.type__caret--done {
  animation: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.words .w {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.35em);
  transition: opacity var(--dur-reveal) var(--ease-soft-out),
    filter var(--dur-reveal) var(--ease-soft-out),
    transform var(--dur-reveal) var(--ease-soft-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.words[data-in="true"] .w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Scroll-driven word reveal for the statement band: every word starts dim
   and brightens in reading order as the band moves up the viewport. */
.scrub .w {
  /* Jeff, 2026-09-17: "This is difficult to read. The text is too dark."
     He was right, and it was an accessibility failure rather than a preference.
     Unlit words sat at 0.24, which is paper on navy-deep at 2.0:1, below even
     the 3:1 large-text minimum, and the gold italic was 1.68:1. At 0.6 the
     text reads 5.8:1 and the italic 4.3:1, and the lift to full opacity is
     still clearly visible as you scroll. */
  opacity: 0.6;
  transition: opacity 0.45s var(--ease-out);
}

.scrub .w[data-on="true"] {
  opacity: 1;
}

.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-soft-out),
    transform var(--dur-reveal) var(--ease-soft-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-item));
}

.rv[data-in="true"] {
  opacity: 1;
  transform: none;
}

.wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-expo-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-item));
}

.wipe[data-in="true"] {
  clip-path: inset(0 0 0 0);
}

/* ---------- accessibility ---------- */

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

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

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--navy);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
}

/* Reduced motion keeps every arrival and removes the travel. The frame stays
   drawn; only the tracer stops walking. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rv,
  .wipe,
  .mask .ln__i,
  .words .w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity 0.2s linear !important;
  }

  .portrait__frame .draw {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .scrub .w {
    opacity: 1 !important;
    transition: none !important;
  }

  .btn--ghost::before {
    transition: none !important;
  }

  .portrait__frame .tracer {
    display: none;
  }

  .rail__row::after,
  .timeline__line span {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .step::before {
    transform: scale(1) !important;
    transition: none !important;
  }

  .hero__wash {
    transform: none !important;
  }

  .hero__aurora::after {
    animation: none !important;
  }

  .timeline__line::after {
    display: none !important;
  }

  .card:hover {
    animation: none !important;
  }

  .btn:active,
  .card:hover,
  .rail__row:hover {
    transform: none;
  }

  .rail__row:hover > * {
    transform: none !important;
  }
}

/* Touch targets. */
@media (hover: none), (pointer: coarse) {
  .footer a,
  .card__meta,
  .rail__meta {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .footer li + li {
    margin-top: 0;
  }
}