/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Halvorsen & Reed: motion in the site's own language. The site is a ruled Swiss page, so things arrive the way a page is set:
   a rule is drawn from the left margin and the words settle under it. Nothing bounces, nothing turns. */
.mo-ready .mo { opacity: 0; transform: translateY(10px); transition: opacity .55s ease-out, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; }

/* ruled blocks (section headings in the index column, the four steps, the side notes): the rule draws across, left to right */
.mo-ready .sec-head.mo, .mo-ready .step.mo, .mo-ready .side-block.mo, .mo-ready .toc.mo { opacity: 1; transform: none; clip-path: inset(-24px 100% -24px -24px); transition: clip-path .85s cubic-bezier(.3,.6,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .sec-head.mo.in, .mo-ready .step.mo.in, .mo-ready .side-block.mo.in, .mo-ready .toc.mo.in { clip-path: inset(-24px -24px -24px -24px); }

/* photographs are uncovered from the top edge, like a sheet lifted off a print */
.mo-ready .split-photo.mo, .mo-ready .head-photo.mo { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .85s cubic-bezier(.3,.6,.2,1); }
.mo-ready .split-photo.mo.in, .mo-ready .head-photo.mo.in { clip-path: inset(0 0 0 0); }

/* The index band: four desk objects that link to the four main pages. Each hangs from an ink rule, like every section on the site.
   The rules draw as the band scrolls into view (--mo-p comes from the kit; without it the rules are simply there). */
.mo-band { background: var(--paper); padding: var(--s8) 0; border-top: 1px solid var(--line); }
.mo-band__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s5); }
.mo-item { position: relative; display: block; padding-top: var(--s5); color: var(--ink); text-decoration: none; }
.mo-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(clamp(0, (var(--mo-p, 1) - 0.02) * 5.5, 1)); }
.mo-item__pic { display: block; width: 104px; margin: var(--s3) 0 var(--s6); }
.mo-item__pic img { width: 100%; height: auto; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mo-item__name { display: block; font: 450 clamp(1.35rem, 1.2rem + 0.5vw, 1.8125rem)/1.2 var(--serif); letter-spacing: -0.015em; margin-bottom: var(--s2); }
.mo-item__name span { text-decoration: underline; text-decoration-color: var(--brick); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.mo-item__note { display: block; font: 500 0.9375rem/1.45 var(--sans); color: var(--slate); max-width: 26ch; }
.mo-item:hover .mo-item__pic img, .mo-item:focus-visible .mo-item__pic img { transform: translateY(-5px); }
.mo-item:hover::before { background: var(--teal); }
.mo-item:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@media (max-width: 899px) { .mo-band { padding: var(--s7) 0; } .mo-band__in { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); } }
@media (max-width: 559px) {
  .mo-band__in { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .mo-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s4); align-items: start; padding: var(--s4) 0 var(--s5); }
  .mo-item__pic { grid-row: 1 / span 2; width: 100%; margin: 0; transform: none !important; }
  .mo-item__name { font-size: 1.4rem; margin-bottom: var(--s1); }
  .mo-item__note { max-width: none; }
}

/* ---- Menu: a two-row bar. A thin stone strip carries the two offices and the one phone number; the main row carries the name,
   a click-to-open list of practice areas, and the one brick button. After the first scroll the strip folds away and the main row
   floats as a squared sheet of paper hanging from a 3px ink rule, the way every section heading on the site does. ---- */
:root { --mo-strip: 40px; --mo-nav-bg: var(--paper); --mo-nav-ink: var(--ink); --mo-nav-line: var(--line); --mo-nav-shadow: 0 10px 28px rgba(22,33,43,.10); --mo-nav-radius: 0px; --mo-nav-pad: var(--gut); }
@media (min-width: 861px) { :root { --mo-nav-h-float: 60px; } }
html { scroll-padding-top: calc(var(--mo-nav-gap) + var(--mo-nav-h-float) + 20px); }
.mo-hdr { height: calc(var(--mo-strip) + var(--mo-nav-h)); }
html:not(.mo-scrolled) .mo-hdr { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
/* the strip */
.mo-top { pointer-events: auto; height: var(--mo-strip); margin: 0 calc(-1 * var(--mo-nav-gap)); overflow: hidden; background: var(--stone); color: var(--ink); font: 500 0.8125rem/1.2 var(--sans); transition: height var(--mo-nav-move), opacity 160ms linear, visibility 0s; }
.mo-top__in { max-width: var(--wrap); height: var(--mo-strip); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.mo-top__offices { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-width: 0; }
.mo-top__offices li { max-width: none; white-space: nowrap; }
.mo-top__offices li + li { margin-left: var(--s4); padding-left: var(--s4); border-left: 1px solid var(--slate); }
.mo-top__offices b { font-weight: 650; }
.mo-top__offices span { color: var(--slate); }
.mo-top__call { margin: 0; max-width: none; display: flex; align-items: center; gap: var(--s4); white-space: nowrap; }
.mo-top__note { color: var(--slate); }
.mo-top__call a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--mo-strip); font-weight: 650; font-size: 0.875rem; text-decoration: none; }
.mo-top__call a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brick); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mo-scrolled .mo-top { height: 0; opacity: 0; visibility: hidden; transition: height var(--mo-nav-move), opacity 160ms linear, visibility 0s 320ms; }
/* the main row */
.mo-bar { max-width: calc(var(--wrap) - 2 * var(--mo-nav-gap)); border-top-width: 3px; gap: var(--s5); }
.mo-scrolled .mo-bar { max-width: min(var(--inner), 100% - 2 * (var(--gut) - var(--mo-nav-gap))); border-top-color: var(--ink); padding: 0 var(--s3) 0 var(--s5); }
.mo-brand { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 44px; line-height: 1.1; }
.mo-brand:hover { color: var(--ink); }
.mo-brand .brand-name { transition: font-size var(--mo-nav-move); }
.mo-scrolled .mo-brand .brand-name { font-size: 1.375rem; }
.mo-scrolled .mo-brand .brand-sub { display: none; }
.mo-nav > ul { gap: var(--s2); }
.mo-nav li { max-width: none; }
.mo-link { font: 500 1rem/1.2 var(--sans); min-height: 44px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: text-decoration-color 150ms linear; }
.mo-link:hover { color: var(--ink); text-decoration-color: var(--brick); }
.mo-link[aria-current="page"] { text-decoration-color: var(--ink); text-decoration-thickness: 3px; }
.mo-has-sub > .mo-link::after { border-width: 0 1.5px 1.5px 0; }
.mo-tel { display: none; }
.mo-tel .mo-link { font-weight: 600; gap: 8px; }
.mo-scrolled .mo-tel { display: block; }
.mo-cta { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.mo-menu-btn { min-height: 44px; border: 1.5px solid var(--ink); border-radius: 3px; font: 600 1rem/1 var(--sans); }
.mo-menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
/* the list of practice areas: a small ruled index card */
.mo-sub { top: calc(100% + 10px); left: 0; width: 23rem; padding: 0; border-radius: 0; border-top: 3px solid var(--ink); }
.mo-sub a { gap: 3px; padding: 12px var(--s4) 13px; border-radius: 0; transition: background-color 150ms linear; }
.mo-sub a + a { border-top: 1px solid var(--line); }
.mo-sub a b { font: 500 1.1875rem/1.2 var(--serif); letter-spacing: -0.01em; }
.mo-sub a small { opacity: 1; color: var(--slate); font: 500 0.875rem/1.4 var(--sans); }
.mo-sub a:hover { background: var(--stone); color: var(--ink); }
.mo-sub a:hover small { color: var(--ink); }
.mo-sub a[aria-current="page"] b { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mo-sub a:focus-visible { outline-offset: -3px; }
/* between a phone and a wide screen the row is tight: the number waits in the strip only, and the type steps down one size */
@media (max-width: 1180px) { .mo-scrolled .mo-tel { display: none; } }
/* (under 900px the number is in the strip and in the site's own bottom dock, so the sheet does not repeat it) */
@media (min-width: 861px) and (max-width: 1040px) { .mo-bar { gap: var(--s3); } .mo-nav > ul { gap: 0; } .mo-link { padding: 0 9px; font-size: 0.9375rem; } .mo-cta { padding-left: 14px; padding-right: 14px; font-size: 0.9375rem; } .mo-brand .brand-sub { display: none; } .mo-top__note { display: none; } }
/* the site's own bottom dock already holds "Request a consultation" and "Call the office" under 900px, so the bar leaves its button to the dock there */
@media (max-width: 899px) { .mo-bar .mo-cta { display: none; } .mo-nav { margin-left: auto; } }
@media (max-width: 860px) {
  .mo-top__offices span, .mo-top__note { display: none; }
  .mo-top__offices li + li { margin-left: var(--s3); padding-left: var(--s3); }
  .mo-brand .brand-name { font-size: 1.375rem; }
  .mo-brand .brand-sub { font-size: 0.75rem; }
  .mo-scrolled .mo-brand .brand-name { font-size: 1.25rem; }
  .mo-scrolled .mo-bar { padding: 0 var(--s2) 0 var(--s4); }
  .mo-menu-btn { margin-left: auto; min-height: 40px; }
  /* the sheet: the same ruled card, opening under the bar and stopping short of the dock */
  .mo-nav { top: calc(100% + 1px); left: -1px; right: -1px; padding: 0 var(--s4); border-radius: 0; border-top: 0; max-height: calc(100dvh - var(--mo-strip) - var(--mo-nav-h) - 24px - 84px - env(safe-area-inset-bottom)); }
  .mo-nav > ul > li + li { border-top: 1px solid var(--line); }
  .mo-link { padding: 0; min-height: 52px; font-size: 1.125rem; }
  .mo-sub { width: auto; border-top: 0; padding: 0 0 var(--s3); }
  .mo-sub a { padding: 10px var(--s3); border-left: 3px solid var(--ink); }
  .mo-sub a + a { border-top: 0; }
}
@media (max-width: 380px) { .mo-top__in { gap: var(--s2); } .mo-top { font-size: 0.75rem; } .mo-top__call a { font-size: 0.8125rem; gap: 6px; } }
@media print { .mo-hdr { display: none !important; } }
/* things on the site that stick near the top now stop below the floating bar */
@media (min-width: 900px) { .sec-head.sticky, .toc { top: calc(var(--mo-nav-gap) + var(--mo-nav-h-float) + 20px); } }

/* ---- Hero: one pinned scroll section. The page is ruled while you scroll, the way a document is prepared for signing:
   an ink rule is drawn over the headline, a margin rule comes down the edge of the photograph, a line is ruled under each of the
   three facts in turn, and the morning light on Main Street comes up as the picture draws slowly nearer. Words and buttons never move. ---- */
.mo-pin { --mo-pin-offset: 72px; --mo-pin-extra: 85vh; }
.mo-pin.is-pinned > .hero { position: sticky; background: var(--paper); }
.mo-pin.is-pinned .hero-text { position: relative; }
.mo-pin.is-pinned .hero-text::before { content: ""; position: absolute; left: 0; right: var(--s7); top: calc(var(--s8) - 30px); height: 3px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(clamp(0, var(--mo-pin) * 3.4, 1)); }
.mo-pin.is-pinned .hero-photo { position: relative; overflow: hidden; overflow: clip; }
.mo-pin.is-pinned .hero-photo img { transform-origin: 30% 55%; transform: scale(calc(1 + var(--mo-pin) * 0.07)); filter: saturate(calc(0.72 + var(--mo-pin) * 0.28)) brightness(calc(0.95 + var(--mo-pin) * 0.05)); }
.mo-pin.is-pinned .hero-photo::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); transform-origin: 50% 0; transform: scaleY(clamp(0, (var(--mo-pin) - 0.12) * 2.4, 1)); }
.mo-pin.is-pinned .hero-facts li::after { content: ""; position: absolute; left: 22px; right: 0; bottom: -7px; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(clamp(0, (var(--mo-pin) - 0.34) * 5, 1)); }
.mo-pin.is-pinned .hero-facts li:nth-child(2)::after { transform: scaleX(clamp(0, (var(--mo-pin) - 0.52) * 5, 1)); }
.mo-pin.is-pinned .hero-facts li:nth-child(3)::after { transform: scaleX(clamp(0, (var(--mo-pin) - 0.70) * 5, 1)); }
.mo-pin.is-pinned .hero-facts li::before { transform: scale(clamp(0.55, 0.55 + (var(--mo-pin) - 0.30) * 2.6, 1)); }
.mo-pin.is-pinned .hero-facts li:nth-child(2)::before { transform: scale(clamp(0.55, 0.55 + (var(--mo-pin) - 0.48) * 2.6, 1)); }
.mo-pin.is-pinned .hero-facts li:nth-child(3)::before { transform: scale(clamp(0.55, 0.55 + (var(--mo-pin) - 0.66) * 2.6, 1)); }
.mo-pin.is-pinned > .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--mo-pin)); }