/* /disclosures, family FIRM "Material": CLEAR. A sheet of clear acrylic on four standoffs, then the filing.
   No motion at all on this page: no page script, no animation, no transition, no smooth scroll. */

html { scroll-behavior: auto; }
body *, body *::before, body *::after { animation: none !important; transition: none !important; }

main { position: relative; }
h2 { font-weight: 400; }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 6vw, 84px) 0 0; }
.hero-in { max-width: 1240px; }
.hero h1 {
  font: 400 clamp(46px, 6.2vw, 92px)/1 var(--serif); letter-spacing: -.02em;
  margin: 0 0 28px; max-width: 12.5em; text-wrap: balance;
}
.hero .lede { font-size: 19px; line-height: 1.62; color: var(--ink-2); max-width: 40em; margin: 0; text-wrap: pretty; }

/* ---------- CLEAR: the plaque ---------- */
.wall { position: relative; padding: clamp(48px, 5vw, 72px) 0 clamp(80px, 10vw, 140px); }
.plaque {
  --t: 7px;                     /* the sheet's visible thickness */
  --off: 22px;                  /* how far it stands off the wall: the cast shadow and the type's shadow */
  position: relative; margin: 0 auto; max-width: 1080px; isolation: isolate;
  padding: clamp(56px, 6.4vw, 92px) clamp(36px, 8vw, 112px) clamp(52px, 6vw, 84px);
  border-radius: 5px;
  /* the face: almost nothing, a little sky in the top left, the wall shows through */
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .26) 20%, rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .16) 100%),
    linear-gradient(180deg, rgba(240, 244, 245, .2), rgba(240, 244, 245, .06));
  box-shadow:
    inset 1px 1px 0 #FFFFFF,                       /* polished top and left edge, catching the light */
    inset 2px 2px 0 rgba(255, 255, 255, .55),
    inset -1px -1px 0 rgba(96, 112, 120, .32),     /* far edges, darker */
    inset -2px -2px 0 rgba(214, 226, 230, .5),
    0 0 0 1px rgba(29, 33, 38, .09);
}
/* the sheet's thickness: its bottom and right edges, a faint sea-glass tint as clear acrylic edges have */
.plaque::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px;
  transform: translate(var(--t), var(--t));
  background: linear-gradient(135deg, rgba(220, 236, 236, .0) 40%, rgba(196, 222, 224, .55) 100%);
  box-shadow:
    inset -1px -1px 0 rgba(120, 150, 154, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    /* the cast shadow on the wall, offset by the standoffs */
    calc(var(--off) - var(--t)) calc(var(--off) - var(--t) + 4px) 26px -6px rgba(29, 33, 38, .16),
    calc(var(--off) * 1.6) calc(var(--off) * 2) 60px -20px rgba(29, 33, 38, .1);
}
/* where light leaves the polished bottom edge it splits: one static fringe on the wall, under the sheet */
.plaque::after {
  content: ""; position: absolute; z-index: -2; left: 9%; right: 4%; inset-block-end: calc(-1 * var(--off) - 4px); height: 7px;
  border-radius: 6px; filter: blur(2.4px); opacity: .62;
  background: linear-gradient(90deg,
    rgba(156, 124, 244, 0) 0, rgba(156, 124, 244, .5) 12%, rgba(79, 195, 232, .55) 30%, rgba(143, 221, 190, .55) 48%,
    rgba(242, 199, 126, .6) 66%, rgba(224, 122, 176, .5) 84%, rgba(224, 122, 176, 0) 100%);
}
/* the sheet's shadow on the wall, seen THROUGH the clear face (an outer box-shadow is never drawn under its box) */
.cast {
  position: absolute; inset: 0; z-index: -3; border-radius: 8px; pointer-events: none;
  transform: translate(var(--off), calc(var(--off) + 6px));
  background: rgba(29, 33, 38, .032); filter: blur(5px);
}
/* light focused by the polished top edge: a thin bright line inside the shadow, static */
.cast::after {
  content: ""; position: absolute; left: 6%; right: 3%; inset-block-start: 3px; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .9); filter: blur(1px);
}

/* four polished standoffs */
.standoff {
  position: absolute; width: 22px; height: 22px; border-radius: 50%; z-index: 2;
  background:
    radial-gradient(circle at 36% 32%, #FFFFFF 0, #F1F3F4 18%, #C9CFD3 52%, #9CA4AA 78%, #C4CACE 100%);
  box-shadow:
    inset 0 0 0 1px rgba(29, 33, 38, .22),
    inset 0 -2px 3px rgba(29, 33, 38, .18),
    0 1px 0 rgba(255, 255, 255, .9),
    5px 7px 7px -2px rgba(29, 33, 38, .22);
}
.standoff::after { /* the barrel's shadow, seen through the clear sheet */
  content: ""; position: absolute; left: 50%; inset-block-start: 50%; width: 14px; height: 14px; border-radius: 50%;
  transform: translate(calc(-50% + var(--off, 22px) * .55), calc(-50% + 13px)); z-index: -1;
  background: rgba(29, 33, 38, .1); filter: blur(3px);
}
.s-tl { left: 26px; inset-block-start: 26px; }
.s-tr { right: 26px; inset-block-start: 26px; }
.s-bl { left: 26px; inset-block-end: 26px; }
.s-br { right: 26px; inset-block-end: 26px; }

/* printed on the back of the sheet: the type casts a faint shadow on the wall behind */
.plaque-face { position: relative; text-align: center; }
.plaque-face p { margin: 0; }
.p-name, .p-qual { text-shadow: 10px 13px 3.5px rgba(29, 33, 38, .055); }
.p-kicker { font: 600 12.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 26px !important; }
.p-name { font: 400 clamp(40px, 5vw, 72px)/1 var(--serif); letter-spacing: -.012em; color: var(--ink); margin-bottom: 22px !important; }
.p-reg {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px;
  font: 500 15px/1.4 var(--sans); letter-spacing: .06em; color: var(--ink); margin-bottom: 8px !important;
}
.p-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.p-addr { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.p-reg span, .nowrap { white-space: nowrap; }
.p-qual {
  font: 400 clamp(24px, 2.4vw, 34px)/1.3 var(--serif); color: var(--ink);
  max-width: 24em; margin: clamp(32px, 4vw, 48px) auto 0 !important; padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid rgba(29, 33, 38, .18); text-wrap: balance;
}
.p-src { position: absolute; left: 0; right: 0; inset-block-end: calc(-1 * var(--off) - 52px); text-align: center; font-size: 13.5px; color: var(--ink-3); }

/* ---------- the filing: index + reading column ---------- */
.filing { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(40px, 5vw, 80px); align-items: start; padding-bottom: clamp(48px, 6vw, 80px); }
.index { position: sticky; inset-block-start: 108px; border-top: 3px double rgba(29, 33, 38, .78); }
.index-h { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list a {
  display: flex; flex-direction: column; gap: 3px; min-height: 64px; justify-content: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.ix-name { font: 400 25px/1.05 var(--serif); }
.ix-sub { font-size: 13.5px; line-height: 1.3; color: var(--ink-3); }
.index-list a:hover .ix-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.doc { scroll-margin-top: 100px; padding: 0 0 clamp(72px, 8vw, 112px); }
.doc + .doc { padding-top: clamp(40px, 4.4vw, 56px); border-top: 1px solid rgba(29, 33, 38, .7); }
.doc:first-child { border-top: 3px double rgba(29, 33, 38, .78); padding-top: clamp(32px, 3.6vw, 48px); }
.doc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.doc h2 { font: 400 clamp(40px, 4.4vw, 62px)/1.02 var(--serif); letter-spacing: -.012em; margin: 0; }
.draft-tag {
  margin: 0; font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding: 8px 11px; border: 1px dashed rgba(29, 33, 38, .42); border-radius: 4px; white-space: nowrap;
}
.doc-body { max-width: 44em; }
.doc-body p { margin: 0 0 18px; font-size: 18px; line-height: 1.66; color: var(--ink); text-wrap: pretty; }
.doc-body a { text-underline-offset: 3px; }
.doc-body h3 { font: 400 clamp(26px, 2.4vw, 32px)/1.15 var(--serif); margin: 48px 0 16px; }
.doc-note { color: var(--ink-2) !important; font-size: 16px !important; }

/* public-record links: ruled rows */
.recs { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid rgba(29, 33, 38, .7); max-width: 44em; }
.rec {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 6px 24px;
  min-height: 68px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.rec-title { font: 500 16.5px/1.35 var(--sans); }
.rec-meta { font-size: 13.5px; color: var(--ink-3); text-align: right; }
.rec:hover .rec-title { text-decoration: underline; text-underline-offset: 4px; }
.rec-arrow { position: relative; width: 18px; height: 1px; background: currentColor; }
.rec-arrow::after { content: ""; position: absolute; right: 0; inset-block-start: -3.5px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* the fee table */
.fees { width: 100%; border-collapse: collapse; margin: 34px 0 30px; font-variant-numeric: lining-nums tabular-nums; }
.fees caption { caption-side: top; text-align: left; font: 600 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 14px; }
.fees thead th { font: 500 13.5px/1.3 var(--sans); color: var(--ink-3); text-align: left; padding: 0 0 12px; border-bottom: 1px solid rgba(29, 33, 38, .7); }
.fees thead th:last-child, .fees td { text-align: right; }
.fees tbody th { font: 400 18px/1.3 var(--sans); text-align: left; color: var(--ink); padding: 20px 16px 20px 0; }
.fees td { font: 400 clamp(36px, 3.4vw, 48px)/1 var(--serif); color: var(--ink); padding: 14px 0; white-space: nowrap; }
.fees tbody tr { border-bottom: 1px solid var(--line); }
.fees tbody tr:last-child { border-bottom: 3px double rgba(29, 33, 38, .78); }
.terms-list { margin: 0 0 8px; padding: 0; list-style: none; }
.terms-list li { position: relative; padding: 0 0 12px 22px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.terms-list li::before { content: ""; position: absolute; left: 2px; inset-block-start: .78em; width: 9px; height: 1px; background: var(--ink-3); }

/* held sections: placeholders for text Charles supplies */
.held {
  max-width: 44em; padding: 26px 28px 8px; border: 1px dashed rgba(29, 33, 38, .34); border-radius: 6px;
  background: rgba(255, 255, 255, .42);
}
.held p { margin: 0 0 18px; font-size: 17px; line-height: 1.62; color: var(--ink); }
.held-h { font: 600 12px/1.2 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2) !important; }
.held-fact { color: var(--ink-2) !important; font-size: 15.5px !important; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- closing ---------- */
.closing { padding: clamp(72px, 8vw, 112px) 0 clamp(88px, 9vw, 124px); text-align: center; border-top: 1px solid var(--line); }
.closing h2 { font: 400 clamp(40px, 5vw, 72px)/1.02 var(--serif); letter-spacing: -.016em; margin: 0 0 32px; }

/* ---------- tablet ---------- */
@media (max-width: 1020px) {
  .filing { grid-template-columns: 1fr; gap: 48px; }
  .index { position: static; }
  .index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .hero { padding-top: 48px; }
  .hero h1 { font-size: clamp(40px, 11vw, 52px); line-height: 1.02; margin-bottom: 20px; }
  .hero .lede { font-size: 17px; }
  .wall { padding: 40px 0 96px; }
  .plaque { --t: 5px; --off: 14px; padding: 52px 22px 40px; }
  .s-tl, .s-tr { inset-block-start: 14px; } .s-bl, .s-br { inset-block-end: 14px; }
  .s-tl, .s-bl { left: 14px; } .s-tr, .s-br { right: 14px; }
  .standoff { width: 16px; height: 16px; }
  .p-kicker { font-size: 11px; letter-spacing: .16em; margin-bottom: 18px !important; }
  .p-name { font-size: clamp(34px, 9.6vw, 44px); margin-bottom: 16px !important; }
  .p-reg { font-size: 14px; flex-direction: column; gap: 2px; }
  .p-sep { display: none; }
  .p-name, .p-qual { text-shadow: 6px 8px 3px rgba(29, 33, 38, .05); }
  .p-addr { font-size: 14px; }
  .p-qual { font-size: 22px; }
  .p-src { inset-block-end: -62px; padding: 0 8px; }
  .index-list .ix-name { font-size: 21px; }
  .doc h2 { font-size: 40px; }
  .doc-body p { font-size: 17px; }
  .rec { grid-template-columns: minmax(0, 1fr) 18px; }
  .rec-meta { grid-column: 1; grid-row: 2; text-align: left; }
  .rec-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .fees tbody th { font-size: 16px; padding-right: 10px; }
  .fees td { font-size: 32px; }
  .held { padding: 22px 18px 4px; }
}
@media (max-width: 420px) {
  .index-list { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .ix-sub { font-size: 12.5px; }
}