/* VC Expert Services — site stylesheet.
   One file for the whole site: the React pages (client/src) and the Docket pages (client/public/docket) both load /site.css.
   Layout widths use container queries on the page root (.vx), so the same rules work at any window size.
   Fonts: Baskervville and Libre Franklin, SIL Open Font License 1.1 (licence texts in /fonts/). */

@font-face { font-family: 'Baskervville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/baskervville-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/baskervville-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/libre-franklin-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Franklin'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/libre-franklin-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- on every page ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
a { color: #1f3f8f; }
a:hover { color: #0e2748; }
.vx { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.vx *, .vx *::before, .vx *::after { box-sizing: border-box; }
.vx img { display: block; }
.vx h1, .vx h2, .vx h3, .vx h4, .vx p, .vx ul, .vx ol, .vx dl, .vx dd, .vx figure { margin: 0; }
.vx ul, .vx ol { padding: 0; list-style: none; }
.vx i.amp { font-family: 'Baskervville', 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.vx :focus-visible { outline: 2px solid #7aa2ff; outline-offset: 3px; }
.vx-links a { position: relative; text-decoration: none; }
.vx-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.vx-links a:hover::after, .vx-links a[aria-current="page"]::after { transform: scaleX(1); }
.vx-menu { display: none; }
.vx-menu summary { list-style: none; cursor: pointer; }
.vx-menu summary::-webkit-details-marker { display: none; }
.vx-menu[open] .vx-menu-panel { display: flex !important; }
.vx-flink { text-decoration: none; transition: opacity .2s ease; }
.vx-flink:hover { opacity: 1 !important; text-decoration: underline; text-underline-offset: 4px; }
.vx-btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.vx-btn-w:hover { background-color: #dde6f3 !important; }
.vx-btn-o:hover { background-color: rgba(255, 255, 255, .16) !important; }
.vx-btn-p:hover { background-color: #1a3d73 !important; }
.vx-tlink { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; padding-bottom: 3px; transition: background-size .35s cubic-bezier(.2, .7, .2, 1); }
.vx-tlink:hover { background-size: 0% 1px; background-position: 100% 100%; }
/* ---- services ---- */
.vx-ul li { position: relative; padding-left: 28px; }
.vx-ul li::before { content: ''; position: absolute; left: 0; top: .8em; width: 13px; height: 1px; background: currentColor; opacity: .5; }
/* light that moves: every full-bleed image is a slow time-lapse */
/* ---- home ---- */
.vx-k { opacity: 0; animation-duration: 36s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; }
.vx-k1 { animation-name: vxk1; }
.vx-k2 { animation-name: vxk2; }
.vx-k3 { animation-name: vxk3; }
.vx-k4 { animation-name: vxk4; }
.vx-k5 { animation-name: vxk5; }
.vx-k6 { animation-name: vxk6; }
.vx-k7 { animation-name: vxk7; }
.vx-k8 { animation-name: vxk8; }
.vx-k9 { animation-name: vxk9; }
.vx-k10 { animation-name: vxk10; }
@keyframes vxk1 { 0% { opacity: 0; } 20.48% { opacity: 1; } 100% { opacity: 1; } }
@keyframes vxk2 { 0%, 20.48% { opacity: 0; } 29.52%, 100% { opacity: 1; } }
@keyframes vxk3 { 0%, 29.52% { opacity: 0; } 36.9%, 100% { opacity: 1; } }
@keyframes vxk4 { 0%, 36.9% { opacity: 0; } 43.59%, 100% { opacity: 1; } }
@keyframes vxk5 { 0%, 43.59% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes vxk6 { 0%, 50% { opacity: 0; } 56.41%, 100% { opacity: 1; } }
@keyframes vxk7 { 0%, 56.41% { opacity: 0; } 63.1%, 100% { opacity: 1; } }
@keyframes vxk8 { 0%, 63.1% { opacity: 0; } 70.48%, 100% { opacity: 1; } }
@keyframes vxk9 { 0%, 70.48% { opacity: 0; } 79.52%, 100% { opacity: 1; } }
@keyframes vxk10 { 0%, 79.52% { opacity: 0; } 100% { opacity: 1; } }
.vx-push { transform-origin: 50% 40%; animation: vxpush 36s ease-in-out infinite alternate; }
@keyframes vxpush { from { transform: scale(1); } to { transform: scale(1.06); } }
.vx-breathe { opacity: 0; animation: vxbreathe 13s ease-in-out infinite alternate; }
@keyframes vxbreathe { from { opacity: 0; } to { opacity: 1; } }
.vx-drift { animation: vxdrift 44s ease-in-out infinite alternate; }
@keyframes vxdrift { from { transform: scale(1.03) translate3d(-.7%, 0, 0); } to { transform: scale(1.09) translate3d(.7%, -.5%, 0); } }
.vx-drift2 { animation: vxdrift2 44s ease-in-out infinite alternate; }
@keyframes vxdrift2 { from { transform: scale(1.02) translate3d(-.4%, 0, 0); } to { transform: scale(1.05) translate3d(.4%, -.3%, 0); } }
.vx-cta-tall { display: none; }
.vx-rise { animation: vxrise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.vx-rise2 { animation-delay: .16s; }
.vx-rise3 { animation-delay: .32s; }
@keyframes vxrise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
/* the plan: drafted linework that draws itself the first time it scrolls into view */
.vx-plan { display: block; width: 100%; height: auto; overflow: visible; }
.vx-plan * { fill: none; stroke: #ffffff; }
.vx-plan .w { stroke-width: 2; }
.vx-plan .f { stroke-width: 1.15; }
.vx-plan .t { stroke-width: .8; opacity: .62; }
.vx-plan .hatch { stroke-width: 6; stroke-dasharray: 1 3.4; opacity: .7; }
.vx-plan .dash { stroke-width: .7; stroke-dasharray: 6 5; opacity: .55; }
.vx-plan .cl { stroke-width: .7; stroke-dasharray: 20 4 3 4; opacity: .75; }
.vx-plan .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vx-armed .d { stroke-dashoffset: 1; }
.vx-armed .fade { opacity: 0; }
.vx-armed.vx-in .d { animation: vxdraw 2.2s cubic-bezier(.4, .2, .2, 1) forwards; }
.vx-armed.vx-in .d2 { animation-delay: .5s; }
.vx-armed.vx-in .d3 { animation-delay: 1.1s; animation-duration: 1.4s; }
.vx-armed.vx-in .fade { animation: vxfade 1.2s ease 1.9s forwards; }
@keyframes vxdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vxfade { from { opacity: 0; } to { opacity: .6; } }
.vx-still .vx-k, .vx-still .vx-breathe { animation: none; opacity: 0; }
.vx-still .vx-push, .vx-still .vx-drift, .vx-still .vx-drift2, .vx-still .vx-rise { animation: none; }
/* ---- services sub-pages (for legal teams, for founders) ---- */
@media (prefers-reduced-motion: reduce) {
  .vx .vx-k, .vx .vx-breathe { animation: none; opacity: 0; }
  .vx .vx-push, .vx .vx-drift, .vx .vx-drift2, .vx .vx-rise { animation: none; }
}
.vx-still .vx-armed .d, .vx-still .vx-armed.vx-in .d { animation: none; stroke-dashoffset: 0; }
.vx-still .vx-armed .fade, .vx-still .vx-armed.vx-in .fade { animation: none; opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .vx .vx-k, .vx .vx-breathe { animation: none; opacity: 0; }
  .vx .vx-push, .vx .vx-drift, .vx .vx-drift2, .vx .vx-rise { animation: none; }
  .vx-armed .d, .vx-armed.vx-in .d { animation: none; stroke-dashoffset: 0; }
  .vx-armed .fade, .vx-armed.vx-in .fade { animation: none; opacity: .6; }
}
/* phone and tablet widths (the page is its own size container) */
@container vx (max-width: 1040px) {
  .vx-links { display: none !important; }
  .vx-menu { display: block; }
}
@container vx (max-width: 900px) {
  .vx-c12 { column-gap: 0 !important; }
  .vx-c12 > * { grid-column: 1 / -1 !important; }
  .vx-g2, .vx-g3, .vx-g4 { grid-template-columns: minmax(0, 1fr) !important; }
  .vx-cell { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .vx-sticky { position: static !important; }
  .vx-foot { grid-template-columns: minmax(0, 1fr) !important; }
}
@container vx (min-width: 600px) and (max-width: 900px) {
  .vx-g4, .vx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vx-g4 { column-gap: 40px !important; }
}
@container vx (max-width: 700px) {
  .vx-hero { height: auto !important; padding-top: 250px; }
  .vx-hero-media { height: 430px !important; }
  .vx-hero-scrim { height: 431px !important; background: linear-gradient(180deg, rgba(6, 16, 32, .6) 0%, rgba(6, 16, 32, .05) 24%, rgba(6, 16, 32, .16) 46%, #0a1628 100%) !important; }
  .vx-hero-txt { position: relative !important; bottom: auto !important; padding-bottom: 48px !important; }
}
@container vx (max-width: 1280px) {
  .vx-duskw { object-position: 91% 70% !important; }
}
@container vx (max-width: 1100px) {
  .vx-cta-wide { display: none; }
  .vx-cta-tall { display: block; }
  .vx-cta-in { padding-bottom: clamp(280px, 82cqw, 460px) !important; }
  .vx-cta-scrim { background: linear-gradient(180deg, #033a6e 0%, #033a6e 40%, rgba(3, 58, 110, 0) 62%) !important; }
}
@container vx (max-width: 600px) {
  .vx-btnrow { flex-direction: column; align-items: stretch !important; }
  .vx-btnrow > a { width: 100%; }
  .vx-assure { flex-direction: column; row-gap: 6px; }
  .vx-assure > span { border-left: 0 !important; padding-left: 0 !important; }
}
/* ---- contact ---- */
.vx-field { display: block; width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid #aab5c5; border-radius: 0; background-color: #ffffff; font-family: inherit; font-size: 16px; line-height: 1.4; color: #1a2433; transition: border-color .2s ease, box-shadow .2s ease; }
.vx-field:hover { border-color: #5f6f86; }
.vx-field:focus { outline: none; border-color: #0e2748; box-shadow: 0 0 0 3px rgba(31, 63, 143, .2); }
.vx-field::placeholder { color: #5f6b7b; opacity: 1; }
.vx select.vx-field { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230e2748' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; cursor: pointer; }
.vx-dl dt { font-size: 14px; color: #44505f; }
.vx-dl dd { margin-top: 4px; font-size: 17px; line-height: 1.5; color: #1a2433; }
@container vx (max-width: 600px) {
  .vx-form2 { grid-template-columns: minmax(0, 1fr) !important; }
}
@container vx (min-width: 1041px) and (max-width: 1240px) {
  .vx-chero { object-position: 50% 90% !important; }
}
@container vx (min-width: 761px) and (max-width: 1040px) {
  .vx-chero { object-position: 50% 96% !important; }
}
@container vx (max-width: 760px) {
  .vx-chero { object-position: 24% 66% !important; }
  .vx-chero-scrim { background: linear-gradient(180deg, rgba(6, 16, 32, .6) 0%, rgba(6, 16, 32, .28) 30%, rgba(6, 16, 32, .8) 56%, rgba(6, 16, 32, .94) 100%) !important; }
}
/* ---- research ---- */
.vx-src { overflow-wrap: anywhere; }
/* ---- publications ---- */
.vx-book { transition: background-color .35s ease; }
.vx-book:hover { background-color: #123058 !important; }
.vx-art h3 a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 96%; transition: background-size .45s cubic-bezier(.2, .7, .2, 1); }
.vx-art:hover h3 a { background-size: 100% 1px; }
@container vx (max-width: 900px) {
  .vx-book { grid-template-columns: minmax(0, 1fr) !important; }
  .vx-book-photo { order: 0 !important; }
  .vx-book-text { padding: 10px clamp(20px, 2.6cqw, 40px) clamp(32px, 4.4cqw, 68px) !important; }
  .vx-art-links { flex-direction: row !important; flex-wrap: wrap; column-gap: 28px !important; }
}
/* ---- about ---- */
.vx-facts li { padding: 12px 0; border-bottom: 1px solid #c9d1dc; }
@container vx (max-width: 900px) {
  .vx-portrait { max-width: 340px; }
  .vx-portrait-sm { max-width: 250px; }
}
.vx-links a[aria-current="true"]::after { transform: scaleX(1); }
/* ---- docket (the pages in client/public/docket, built by scripts/docket.mjs) ---- */
.vx-issue { transition: background-color .3s ease, padding .3s ease; }
.vx-issue:hover { background-color: #eef1f5; }
.vx-issue .vx-arrow { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.vx-issue:hover .vx-arrow { transform: translateX(6px); }
.vx-dk-date a { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.vx-dk-about strong { font-weight: 600; color: #1a2433; }
.vx-dk-footline a { color: #ffffff; opacity: .9; text-decoration: none; transition: opacity .2s ease; }
.vx-dk-footline a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.vx-dk-body ul, .vx-dk-body ol { padding-left: 1.3em; list-style: revert; }
.vx-dk-body blockquote { margin: 0; padding-left: 20px; border-left: 2px solid #b9c3d1; }
@container vx (max-width: 900px) {
  .vx-issue { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 6px !important; }
  .vx-issue > .vx-i-no { grid-column: 1 !important; }
  .vx-issue > .vx-i-date { grid-column: 1 !important; }
  .vx-issue > .vx-i-sum { grid-column: 1 / -1 !important; }
  .vx-issue > .vx-arrow { grid-column: 2 !important; grid-row: 1 !important; }
  .vx-dk-nav { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px; }
  .vx-dk-nav > * { justify-self: start !important; }
}
/* ---- books ---- */
@container vx (max-width: 900px) {
  .vx-bk-text, .vx-bk-photo, .vx-bk-buy { grid-row: auto !important; }
  .vx-bk-photo { margin-top: 36px; max-width: 680px; }
}
.vx-back { transition: color .2s ease; }
.vx-back:hover { color: #ffffff !important; }
.vx-back svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.vx-back:hover svg { transform: translateX(-4px); }
@container vx (max-width: 760px) {
  .vx-two { grid-template-columns: minmax(0, 1fr) !important; }
  .vx-pair > * { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}
@container vx (max-width: 900px) {
  .vx-cols2 { columns: 1 !important; }
}
@container vx (max-width: 900px) {
  .vx-sides { grid-template-columns: minmax(0, 1fr) !important; row-gap: 48px !important; }
  .vx-sides-plan { display: none; }
  .vx-side-l { justify-self: start !important; }
  .vx-step { padding-right: 0 !important; }
  .vx-area { border-left: 0 !important; padding-left: 0 !important; }
}
.vx-svc { transition: border-color .3s ease; }
.vx-svc:hover { border-top-color: #0e2748 !important; }

/* ---- contact form states (client/src/components/ContactForm.tsx) ---- */
.vx-btn-p:disabled { opacity: .62; cursor: default !important; }
.vx-btn-line:hover { background-color: rgba(14, 39, 72, .07) !important; }
.vx-toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: flex; align-items: flex-start; gap: 18px; width: min(420px, calc(100vw - 48px)); padding: 16px 16px 16px 20px; background: #0e2748; color: #ffffff; font-size: 14.5px; line-height: 1.5; box-shadow: 0 18px 40px -18px rgba(2, 8, 20, .6); animation: vxtoast .35s cubic-bezier(.2, .7, .2, 1) both; }
.vx-toast-failed { background: #8c1d18; }
.vx-toast-close { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -2px 0 0 auto; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .8); cursor: pointer; }
.vx-toast-close:hover { color: #ffffff; }
@keyframes vxtoast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .vx-toast { animation: none; }
}


/* ---- staged loading of the later lighting states (client/src/lib/later-images.js) ---- */
/* A later state waits, invisible and with its animation not started, until its picture has arrived. */
.vx .vx-wait { animation: none !important; }
.vx img.vx-wait { opacity: 0 !important; }