*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Paints before anything else loads. The page's own background lives in its x-dc
   helmet, which does not apply until the raw template parses and vanishes for a
   frame when the runtime mounts, so without this the first paint is white. */
html{background:#F6F4EF}
body{overflow-x:hidden}
img,svg,video{max-width:100%}
a:focus-visible,button:focus-visible{outline:3px solid #8F6A1E;outline-offset:3px}
[data-screen-label="Nav"]{position:sticky!important;top:0;z-index:100;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .28s ease,backdrop-filter .28s ease,-webkit-backdrop-filter .28s ease}
[data-screen-label="Nav"][data-scrolled="true"]{background:linear-gradient(to bottom,rgba(246,244,239,.34),rgba(246,244,239,.16) 72%,rgba(246,244,239,0));backdrop-filter:blur(5px) saturate(1.05);-webkit-backdrop-filter:blur(5px) saturate(1.05)}
/* Pages with a full-bleed hero: the nav floats over it instead of sitting on a band above it.
   --cp-nav-h is measured by nav-scroll.js; the fallback matches the desktop nav height. */
.nav-overlay [data-screen-label="Nav"]{margin-bottom:calc(-1 * var(--cp-nav-h,104px))}
.nav-overlay [data-screen-label="Hero"]{padding-top:var(--cp-nav-h,104px)}
/* Hero chip hangs off the screenshot to the right. The hero clips overflow, so
   step the shift down as the viewport narrows rather than letting it be cut. */
@media(max-width:1400px){[data-hero-chip]{transform:translateX(30%)!important}}
@media(max-width:1100px){[data-hero-chip]{transform:translateX(10%)!important}}
/* Entrance pre-hide. Elements that animate in on load start hidden from the first
   paint, so the page never shows them, hides them, and shows them again. The
   animation scripts take over by setting data-entrance-ready / data-reveal-ready
   on <html>; an inline timer in each page's <head> sets both at 2s regardless, so
   a slow or failed script never leaves the page blank. Only when scripting is on,
   since the timer could not run otherwise. Reveals honour reduced motion because
   case-anim.js does; the home entrance deliberately does not (see home-anim.js). */
@media (scripting:enabled){
  html:not([data-entrance-ready]) [data-entrance]{opacity:0}
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:not([data-reveal-ready]) [data-reveal]{opacity:0}
}
/* Home logo strip, after the Turbine template: spans the site's content width
   (it fades out at the same edges as the metrics below it; operator, 2026-09-29),
   faded over the outer 12% each side, drifting left in a seamless loop at
   ~16.5px/s. The track holds two identical groups and moves by exactly one
   (-50%). Each group ends in its own trailing gap, so the seam is invisible.
   Durations are group width ÷ 16.5px/s: 688px of names + 9×64px = 1264px → 77s;
   + 9×44px = 1084px → 66s. Re-derive if the names change. It holds still with
   ?motion=off, and for visitors who ask for reduced motion; it pauses on hover
   or focus (WCAG 2.2.2). */
[data-logo-row]{overflow:hidden;justify-content:flex-start!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
[data-logo-track]{display:flex;flex:none;width:max-content;animation:cp-logo-marquee 77s linear infinite}
[data-logo-group]{display:flex;flex:none;align-items:center;gap:64px;padding-right:64px}
[data-logo-row]:hover [data-logo-track],[data-logo-row]:focus-within [data-logo-track]{animation-play-state:paused}
@keyframes cp-logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[data-motion="reduced"] [data-logo-row]{justify-content:center!important}
html[data-motion="reduced"] [data-logo-track]{animation:none}
html[data-motion="reduced"] [data-logo-group][aria-hidden]{display:none}
@media (prefers-reduced-motion: reduce){
  [data-logo-row]{justify-content:center!important}
  [data-logo-track]{animation:none}
  [data-logo-group][aria-hidden]{display:none}
}
@media (max-width: 760px){
  [data-logo-track]{animation-duration:66s}
  [data-logo-group]{gap:44px;padding-right:44px}
}
/* Motion is enabled by default for this portfolio. Use ?motion=off for a static/reduced-motion experience. */
/* Phone menu (≤760px): the nav pill's button opens a panel directly beneath it,
   same surface and shadow, so the two read as one shape. State is data-menu-open
   on <html>, set by assets/scripts/nav-menu.js. Hidden entirely above 760px. */
[data-menu-toggle],[data-menu-panel]{display:none}
@media (max-width: 760px){
  [data-screen-label="Nav"]{padding:16px!important;justify-content:flex-start!important;min-height:auto!important}
  [data-screen-label="Nav"]>div:first-child{width:100%!important;padding:10px 14px!important;gap:10px!important;justify-content:space-between!important}
  [data-screen-label="Nav"]>div:first-child>span:nth-child(4){display:none!important}
  [data-screen-label="Nav"]>div:nth-child(2){display:none!important}
  [data-screen-label="Hero"] img[alt="Christopher Price"]{display:none!important}
  [data-screen-label] div[style*="max-width: 1160px"]{padding-left:22px!important;padding-right:22px!important}
  [data-screen-label="Stats"]{padding-left:22px!important;padding-right:22px!important}
  /* The design exports lay out side-by-side content as flex-wrap rows whose items
     carry a min-width, so they wrap when space runs out. On a phone every such
     item takes the full row; zeroing min-width alone stops the wrap and squeezes
     columns to a word or two per line. min-width: 0 items are left alone: those
     are deliberate truncation, not wrap triggers. Once React renders, the browser
     re-serialises direction + wrap as the flex-flow shorthand, hence both forms. */
  [data-screen-label] :is([style*="flex-wrap: wrap"],[style*="flex-flow:"][style*=" wrap"])>[style*="min-width:"]:not([style*="min-width: 0"]){flex-basis:100%!important;min-width:0!important}
  /* auto-fit grids whose minimum column (300px and up) is wider than a phone's
     content box would overflow sideways rather than drop to one column. */
  [data-screen-label] [style*="repeat(auto-fit, minmax(3"]{grid-template-columns:1fr!important}
  /* The portrait is hidden on phones; its ring badge would otherwise float over
     the hero buttons. */
  [data-screen-label="Hero"] div[style*="clamp(340px, 46vw, 680px)"]{display:none!important}
  [data-screen-label="Career story"] button{width:100%!important;text-align:left!important}
  /* Footer links: a tidy 2-column grid on phones instead of one wrapping row. */
  [data-footer-links]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px!important}
  [data-screen-label="Nav"]>div:first-child{position:relative}
  [data-menu-toggle]{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:50%;background:transparent;color:#121714;cursor:pointer}
  [data-menu-toggle] span,[data-menu-toggle] span::before,[data-menu-toggle] span::after{display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .2s ease,background-color .2s ease}
  [data-menu-toggle] span{position:relative}
  [data-menu-toggle] span::before,[data-menu-toggle] span::after{content:"";position:absolute;left:0}
  [data-menu-toggle] span::before{top:-6px}
  [data-menu-toggle] span::after{top:6px}
  html[data-menu-open] [data-menu-toggle] span{background:transparent}
  html[data-menu-open] [data-menu-toggle] span::before{top:0;transform:rotate(45deg)}
  html[data-menu-open] [data-menu-toggle] span::after{top:0;transform:rotate(-45deg)}
  [data-menu-panel]{position:absolute;z-index:101;left:0;right:0;top:calc(100% + 8px);flex-direction:column;padding:8px 18px 16px;background:#FCFBF8;border:1px solid #ECE9DF;border-radius:20px;box-shadow:0 1px 2px rgba(18,23,20,.05),0 12px 28px rgba(18,23,20,.10)}
  html[data-menu-open] [data-menu-panel]{display:flex}
  [data-menu-panel]>a{padding:13px 2px;border-bottom:1px solid #EFECE3;font:600 16px Inter,sans-serif;color:#121714;text-decoration:none}
  [data-menu-panel]>a[data-menu-primary]{margin-top:14px;padding:13px 16px;border:0;border-radius:4px;background:#121714;color:#F6F4EF;font-size:14px;text-align:center}
  [data-menu-secondary]{display:flex;justify-content:space-between;margin-top:10px}
  [data-menu-secondary] a{display:inline-flex;align-items:center;gap:6px;padding:8px 2px;font:600 13px Inter,sans-serif;color:#1D4A38;text-decoration:none}
  /* Background section numerals: a quiet corner marker on phones, not a 180px
     glyph running behind the headings. */
  [data-ghost-numeral]{font-size:72px!important;top:12px!important;right:16px!important;left:auto!important}
  /* Founder portfolio: the orbit motif leaves a large empty block on phones. */
  [data-screen-label="Ventures"] img[src*="motif-orbit"]{display:none!important}
  /* Home hero body: tighter top and bottom on phones (operator, 2026-09-28); the
     sides stay on the 22px phone gutter so both CTAs keep one row at 320px. */
  [data-hero-body]{padding-top:32px!important;padding-bottom:20px!important}
  /* Choose-your-lens background (grid, chart line, wash): faint on phones, where
     the text sits directly over it. */
  [data-lens-bg]{opacity:.35}
  /* Operating Model on phones: half the space between the intro and the graphic,
     and below the graphic to the next section (operator, 2026-09-29). The rest of
     the halving is the embed's own html.phone padding. */
  [data-throughline-body]{row-gap:24px!important;padding-bottom:40px!important}
  /* Case studies: section spacing halved on phones, as on the home page. */
  [data-cs-body]{padding-top:40px!important;padding-bottom:32px!important}
  [data-cs-tail]{padding-bottom:32px!important}
  [data-cs-rowpad]{padding-top:24px!important;padding-bottom:20px!important}
  /* A padded row that opens a section already sits under the section's 40px. */
  [data-cs-body]>[data-cs-rowpad]:first-child{padding-top:0!important}
  /* Case-study hero, as on home: the phone gutter and a tighter top. */
  [data-cs-hero-body]{padding-left:22px!important;padding-right:22px!important;padding-top:32px!important}
  /* Case-study hero stats: one per row, number left, label right. */
  [data-cs-hero-stats]{grid-template-columns:1fr!important}
  [data-cs-hero-stats]>div{display:grid!important;grid-template-columns:110px 1fr;align-items:center;column-gap:12px;padding:12px 0!important;border-left:0!important}
  [data-cs-hero-stats]>div+div{border-top:1px solid #2C4438}
  [data-cs-hero-stats]>div>div:last-child{margin-top:0!important}
  [data-cs-hero-stats]>div>div:first-child{font-size:26px!important}
  /* RackRunner "At a glance": a compact 2×2, like the home stats. */
  [data-screen-label] [data-cs-glance]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 20px!important}
  [data-cs-glance] [data-count]{font-size:28px!important}
  /* USAA hero art: the two mockups side by side at full width, with no fixed
     600px stage leaving empty space beneath them. */
  [data-cs-hero-text]{padding-bottom:28px!important}
  [data-cs-usaa-art]{height:480px!important}
  /* RackRunner hero art: desktop screen full width, the phone screen beneath it,
     both fully inside the hero. */
  [data-cs-rr-art]{flex-wrap:wrap!important;justify-content:center;margin-top:8px}
  [data-cs-rr-art]>:first-child{flex:1 1 100%!important;margin-bottom:0!important}
  [data-cs-rr-art]>:nth-child(2){flex:0 0 auto!important;width:62%;max-width:none!important;margin-bottom:28px!important}
  /* Rollbook: the field-review embed keeps its own 16:9 box. */
  [data-hero-anim] iframe{min-height:0!important}
  /* RackRunner The Stack: the label sits above its detail on phones. */
  [data-rr-stack]{padding:4px 20px!important}
  [data-rr-stack-row]{grid-template-columns:1fr!important;gap:4px!important}
  iframe{min-height:280px}
}
@media (max-width: 400px){
  /* Same overflow as above for 200-280px minimums on the narrowest phones. */
  [data-screen-label] [style*="repeat(auto-fit, minmax(2"]{grid-template-columns:1fr!important}
}
/* Home hero on phones: the headline fits in about 5–6 lines rather than 8, and the
   two CTAs share one row (operator: never stacked). Scoped to the home hero by its
   portrait; the case-study heroes are the next slice. */
@media (max-width: 430px){
  [data-screen-label="Hero"]:has(img[alt="Christopher Price"]) h1{font-size:32px!important}
  [data-hero-actions]{flex-wrap:nowrap!important;gap:10px!important}
  [data-hero-actions]>a{flex:1 1 auto;padding:12px 14px!important;font-size:13.5px!important;text-align:center;white-space:nowrap}
}
@media (max-width: 359px){
  [data-hero-actions]>a{padding:11px 8px!important;font-size:12px!important}
}
@media (max-width: 430px){
  [data-cs-hero-h1]{font-size:32px!important}
}
/* Stats: a compact 2×2 grid on phones. The selector outranks the ≤400px rule that
   collapses minmax(2…) grids to one column. */
@media (max-width: 760px){
  [data-screen-label="Stats"]>div[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 20px!important}
  [data-screen-label="Stats"]>div>div>div:first-child{font-size:28px!important}
}
/* Tablets and small laptop windows. The nav pill is ~696px and never shrinks,
   while the contact icons sit absolutely 40px from the right edge, so below
   ~980px the pill slid under them. Here the icons join the flow at the right, and
   the pill tightens its spacing to fit beside them. */
/* Rollbook Signature Model on phones and tablets: no floating layer list for the
   content to scroll behind; each layer already carries its own heading. Desktop
   keeps the sticky rail (operator, 2026-09-29). */
@media (max-width: 1024px){
  [data-chain-rail]{display:none!important}
}
@media (min-width: 761px) and (max-width: 1100px){
  [data-screen-label="Nav"]{padding-left:24px!important;padding-right:24px!important;justify-content:space-between!important;gap:16px}
  [data-screen-label="Nav"]>div:nth-child(2){position:static!important;transform:none!important;flex:none}
  [data-screen-label="Nav"]>div:first-child{padding-right:20px!important;gap:14px!important}
  [data-screen-label="Nav"]>div:first-child>span:nth-child(4){margin-left:4px!important;gap:18px!important}
}
/* Home hero, tablets to small laptops: the portrait (46vw, 8% from the right)
   overlapped the 620px text column. The text column is held to half the width
   and the portrait moves to the right edge, so the two sit side by side. */
@media (min-width: 761px) and (max-width: 1180px){
  [data-screen-label="Hero"]:has(img[alt="Christopher Price"]) div[style*="max-width: 620px"]{max-width:min(620px,50vw)!important}
  [data-screen-label="Hero"] div[style*="clamp(340px, 46vw, 680px)"]{right:2%!important;width:clamp(300px,44vw,680px)!important}
}
/* Case-study side rail: tucked away while it would cover the content column
   beside it (case-anim.js sets html[data-rail-tucked]). It keeps its box, so it
   can be measured again as the page scrolls. */
#cp-rail{transition:opacity .2s ease,visibility .2s}
html[data-rail-tucked] #cp-rail{opacity:0;visibility:hidden;pointer-events:none}
/* Home hero, opt-in [data-hero-fit]: the portrait is anchored to the hero's
   bottom, so a short headline left the hero shorter than the portrait and
   pushed it up under the nav and its ring into the headline. The hero is held
   at least as tall as the portrait (1186:1327) plus a 48px gap. Phones hide
   the portrait and are unaffected. The leadership hero, already tall enough,
   does not opt in. */
@media (min-width: 1181px){[data-screen-label="Hero"][data-hero-fit]{min-height:calc(clamp(340px,46vw,680px)*1327/1186 + 48px)}}
@media (min-width: 761px) and (max-width: 1180px){[data-screen-label="Hero"][data-hero-fit]{min-height:calc(clamp(300px,44vw,680px)*1327/1186 + 48px)}}
.teaser-body{margin:0;background:#F6F4EF;color:#121714;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.teaser-shell{max-width:1160px;margin:0 auto;padding:28px 40px 80px}
.teaser-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 0 56px;border-bottom:1px solid #E0DCD0}
.teaser-nav a{color:#1D4A38;text-decoration:none;font-size:13px;font-weight:600}
.teaser-nav .brand{font-size:16px;color:#121714}
.teaser-card{max-width:820px;padding:88px 0}
.teaser-card .eyebrow{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#1D4A38;margin-bottom:18px}
.teaser-card h1{font:800 clamp(42px,7vw,76px)/1.02 Inter,sans-serif;letter-spacing:-.04em;margin:0 0 26px}
.teaser-lead{font:600 clamp(22px,3vw,32px)/1.3 'Source Serif 4',serif;margin:0 0 24px;max-width:760px}
.teaser-card p:not(.teaser-lead){font:400 16px/1.7 Inter,sans-serif;color:#55605A;max-width:650px}
.coming{display:inline-block;margin-top:28px;padding:8px 11px;border:1px solid #C9C4B4;border-radius:999px;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#55605A}
.teaser-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:42px}
.teaser-actions a{color:#1D4A38;text-decoration:none;font-weight:600;font-size:14px}
.teaser-actions .primary{background:#121714;color:#F6F4EF;padding:13px 20px;border-radius:4px}
@media(max-width:760px){.teaser-shell{padding:18px 22px 56px}.teaser-nav{padding-bottom:36px}.teaser-card{padding:60px 0}.teaser-card h1{font-size:42px}.teaser-lead{font-size:23px}}