/* Portfolio concept "Light": shared styles for all pages.
   Every tab is its own page. Light paper with black accents; the dark-to-light gradient is the Codex footer gradient.
   Card pages use a grey surface so white cards stand out. */
:root{
  --black:#08090a;
  --ink:#0d1013;
  --ink-2:#252c33;
  --text-2:#4b5761;
  --text-3:#5f6b75;
  --slate:#73808b;
  --paper:#f3f5f7;
  --surface:#e8ecef;
  --tint:#eef1f4;
  --card:#ffffff;
  --line:#d5dbe0;
  --line-2:#b8c2ca;
  --on-dark:#f1f4f6;
  --on-dark-2:#aab5be;
  --line-dark:rgba(255,255,255,.14);
  --fade-x:linear-gradient(90deg,#08090a 0%,#252c33 20%,#73808b 40%,#d8e0e6 57%,#f8fafc 100%);
  --panel:linear-gradient(165deg,#0b0d0f 0%,#1c2227 100%);
  --lift:0 1px 2px rgba(13,16,19,.06),0 14px 32px -22px rgba(13,16,19,.42);
  --lift-hover:0 1px 2px rgba(13,16,19,.06),0 22px 42px -22px rgba(13,16,19,.5);
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  /* near full width, like the home hero; capped only on very wide screens */
  --max:1520px;
  --gutter:clamp(16px,4vw,56px);
  --header:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body.surface{background:var(--surface)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.eyebrow{display:block;font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.li-blue{display:inline-flex;color:#0a66c2}
.page-top{padding:calc(var(--header) + 16px) 0 clamp(56px,7vw,96px)}
/* dark "more on LinkedIn" tiles at the end of the article and recommendation grids */
.more-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#0a66c2;color:#fff}
.more-icon svg{width:22px;height:22px}
.more-go{display:inline-flex;gap:8px;font-size:15px;font-weight:500}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.scrolled,.site-header.menu-open{background:rgba(243,245,247,.96);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:20px;height:var(--header)}
/* desktop: no bar behind the tabs, the frosted pill floats on its own */
@media (min-width:1001px){.site-header.scrolled{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Segmented tabs: one frosted pill, the current page in black */
.nav-links{display:flex;align-items:center;gap:2px;padding:5px;border:1px solid rgba(13,16,19,.09);border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 30px -20px rgba(8,9,10,.4)}
.nav-links a{padding:11px 16px;border-radius:999px;font:500 14.5px/1 var(--sans);letter-spacing:.005em;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav-links a:hover{background:rgba(13,16,19,.07);color:var(--ink)}
.nav-links a[aria-current="page"]{background:var(--ink);color:#fff}
.menu-btn{display:none;height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(8,9,10,.25);color:#fff;font:500 14px/1 var(--sans);cursor:pointer}
.scrolled .menu-btn,.menu-open .menu-btn{border-color:var(--line-2);background:transparent;color:var(--ink)}
.mobile-nav{padding:4px var(--gutter) 18px;border-top:1px solid var(--line)}
.mobile-nav a{display:block;padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-size:18px;color:var(--ink)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a[aria-current="page"]{font-weight:600}

/* Home: one screen. The black photo runs to the bottom edge and fades into light paper on the right,
   with the same transition along the full height. Eased ramp (smoothstep), kept short:
   the photo stays whole up to ~43% of the width and the light side takes over by ~60%. */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:max(640px,100vh);
  background:linear-gradient(90deg,#08090a 0%,#0d0f11 30%,#121518 43%,#171b1e 44.9%,#262b30 46.8%,#3c434a 48.7%,#566069 50.6%,#73808b 52.5%,#99a3ab 54.4%,#bcc2c8 56.3%,#d8dde1 58.2%,#eceef1 60.1%,var(--paper) 62%)}
.hero-photo{position:relative;margin:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 86%,rgba(0,0,0,.85) 89.5%,rgba(0,0,0,.58) 93%,rgba(0,0,0,.28) 96.5%,rgba(0,0,0,.07) 99%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 86%,rgba(0,0,0,.85) 89.5%,rgba(0,0,0,.58) 93%,rgba(0,0,0,.28) 96.5%,rgba(0,0,0,.07) 99%,transparent 100%)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 70%}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.5) 0%,rgba(8,9,10,0) 22%),linear-gradient(90deg,rgba(8,9,10,.6) 0%,rgba(8,9,10,.16) 30%,rgba(8,9,10,0) 52%)}
.hero-copy{position:relative;align-self:center;justify-self:center;width:min(100%,700px);padding:calc(var(--header) + 32px) var(--gutter) 56px clamp(28px,4.5vw,72px)}
.hero h1{font:400 clamp(54px,6.4vw,96px)/.94 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.hero-role{margin:24px 0 4px;font:500 clamp(18px,1.6vw,22px)/1.35 var(--sans);color:var(--ink-2)}
.hero-loc{margin:0;font-size:15px;color:var(--text-3)}
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(32px,5vh,52px);border-top:1px solid var(--line-2)}
.result{padding:22px 16px 20px 0;border-bottom:1px solid var(--line)}
.result:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.result b{display:block;font:400 clamp(40px,3.6vw,54px)/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.result span{display:block;margin-top:10px;font-size:15px;line-height:1.42;color:var(--text-2);max-width:24ch}

/* Case Studies: one case per screen. The card Vitali liked first (dark side panel with logo, role and quote,
   white body with the story), sized to fit a screen; cards follow each other with a small gap. */
html:has(body.cases){scroll-snap-type:y proximity;scroll-padding-top:calc(var(--header) - 20px)}
body.cases main{padding:calc(var(--header) - 20px) 0 40px}
.case-slide{padding-top:24px;scroll-snap-align:start}
.case{display:grid;grid-template-columns:minmax(280px,.34fr) minmax(0,1fr);overflow:hidden;border-radius:24px;background:var(--card);box-shadow:var(--lift)}
.case-id{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,2.4vw,36px);background:var(--panel);color:var(--on-dark)}
.case-id>:not(.case-photo){position:relative;z-index:1}
/* Portrait from that time, anchored to the bottom of the dark panel: the face sits between the role and the quote.
   --ph is the photo height as a share of the panel, set per photo so the head lands in that gap.
   The photo's top and sides fade into the panel; the bottom darkens so the quote stays readable. */
.case-photo{position:absolute;inset:0;margin:0;pointer-events:none}
.case-photo img{position:absolute;bottom:0;left:50%;height:var(--ph,70%);width:auto;max-width:none;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%),linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%),linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect}
.case-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,15,0) 56%,rgba(11,13,15,.8) 75%,rgba(14,17,20,.95) 100%)}
.logo-plate{display:inline-flex;align-items:center;align-self:flex-start;height:56px;padding:0 18px;border-radius:12px;background:#fff}
.logo-plate img{height:28px;width:auto}
.logo-plate.getid{padding:0;overflow:hidden;background:#3b1f7d}
.logo-plate.getid img{height:56px}
.case-what{margin:0;font-size:15.5px;line-height:1.5;color:var(--on-dark-2)}
.case-meta{display:grid;gap:12px;margin:0;padding-top:18px;border-top:1px solid var(--line-dark)}
.case-meta dt{font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.case-meta dd{margin:3px 0 0;font-size:16px}
.case-quote{margin:auto 0 0;padding-top:20px;border-top:1px solid var(--line-dark)}
.case-quote blockquote{margin:0;font:400 20px/1.3 var(--serif);color:var(--on-dark)}
.case-quote figcaption{margin:12px 0 14px;font-size:14px;line-height:1.45;color:var(--on-dark-2)}
.case-link{display:inline-block;color:var(--on-dark);font-size:14.5px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .2s}
.case-link:hover{border-color:var(--on-dark)}
.case-body{padding:clamp(24px,2.6vw,40px) clamp(24px,3vw,48px)}
.case-body h2{max-width:28ch;font:400 clamp(30px,2.8vw,42px)/1.08 var(--serif);letter-spacing:-.015em}
.case-lede{margin:12px 0 24px;max-width:62ch;font-size:17px;color:var(--text-2)}
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0 0 24px}
.story dt{margin-bottom:6px}
.story dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts div{padding:18px 12px 0 0}
.facts div+div{padding-left:16px;border-left:1px solid var(--line)}
.facts b{display:block;font:400 clamp(28px,2.5vw,38px)/1 var(--serif);color:var(--ink)}
.facts span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--text-3)}
/* External proof under the story: recognition posts, press */
.proof{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.proof-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin-bottom:4px}
.proof-head span:last-child{font-size:13.5px;color:var(--text-3)}
.proof ul{list-style:none;margin:0;padding:0}
.proof li+li{border-top:1px solid var(--line)}
.proof a{display:grid;grid-template-columns:76px minmax(0,1fr) auto 16px;gap:16px;align-items:baseline;margin:0 -12px;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background-color .2s}
.proof a:hover{background:var(--tint)}
.proof time{font-size:14px;color:var(--text-3);font-variant-numeric:tabular-nums}
.proof .t{font-size:15.5px;font-weight:500;line-height:1.45;color:var(--ink)}
.proof .by{font-size:14px;color:var(--text-3);white-space:nowrap}
.proof .li{align-self:center;width:16px;height:16px;color:var(--text-3);transition:opacity .2s}
.proof .li.li-blue{color:#0a66c2}
.proof a:hover .li{opacity:.75}

/* Current Chapter: the road from 2009 on top, then VTrust as a light card. Light past, black present. */
.road-section{padding:calc(var(--header) + 12px) 0 28px}
.road-title{margin-bottom:10px;font:400 clamp(24px,2.1vw,30px)/1.1 var(--serif);letter-spacing:-.01em}
.road{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;margin:0;padding:0;list-style:none}
/* the line ends at the "Now" node: one column (minus the node radius) short of the right edge */
.road::before{content:"";position:absolute;left:8px;right:calc((100% - 112px)/5 - 8px);top:35px;height:2px;border-radius:2px;background:linear-gradient(90deg,#c9d1d8 0%,#8d99a3 45%,#3e474f 75%,#0d1013 100%)}
.stop{position:relative;padding-top:62px}
.stop::before{content:"";position:absolute;top:28px;left:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--node,#9aa6b0)}
.stop-years{position:absolute;top:0;left:0;font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.stop h3{font:400 clamp(20px,1.6vw,23px)/1.15 var(--serif);letter-spacing:-.01em}
.stop-roles{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.stop-roles b{display:block;font-size:15px;font-weight:500;line-height:1.35}
.stop-roles span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.stop-roles small{font-size:13px;color:var(--text-3)}
.stop-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--text-2)}
.stop-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.stop-link:hover{border-color:var(--ink)}
.stop.now::before{top:24px;left:-4px;width:24px;height:24px;border:0;background:var(--ink);box-shadow:0 0 0 7px rgba(13,16,19,.12)}
.stop.now .stop-years{color:var(--ink);font-weight:600}
.now-card{margin-top:-8px;padding:20px 20px 22px;border-radius:18px;background:var(--panel);color:var(--on-dark);box-shadow:0 26px 50px -30px rgba(8,9,10,.6)}
/* desktop: "The Road Here" stands over the VTrust card, where the road arrives; the h2 above the road stays for screen readers and shows on phones */
.road-here{margin:0 0 14px;font:400 clamp(24px,2.1vw,30px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
@media (min-width:901px){.road-section .road-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.chapter-mark{width:40px;margin-bottom:12px;filter:invert(1) brightness(1.15)}
.now-card .stop-roles span{color:var(--on-dark-2)}
.vt-section{padding:6px 0 36px}
/* no outer card: the left block sits on the page, the three products are white cards */
.vt-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.vt-brand{display:flex;align-items:center;gap:14px}
.vt-mark{width:42px}
.vt-brand h2{font:400 clamp(30px,2.6vw,38px)/1 var(--serif)}
.vt-desc{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.vt-role{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.vt-role p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--text-2)}
.vt-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.vt-products li{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:16px;background:var(--card);box-shadow:var(--lift)}
.vt-products small{align-self:flex-start;padding:5px 9px;border-radius:999px;background:var(--tint);font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.vt-products b{font:400 24px/1.1 var(--serif);color:var(--ink)}
.vt-products span{font-size:14.5px;line-height:1.5;color:var(--text-2)}

/* Recommendations: a slim dark band with the LinkedIn link in its top-left corner, then filters and white cards */
.li-band{display:flex;align-items:center;min-height:calc(var(--header) + 16px);padding:12px 0;background:linear-gradient(90deg,#08090a 0%,#1a1f24 45%,#2f363d 100%);color:var(--on-dark)}
.li-band .container{display:flex}
.li-band-link{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.li-band-link b{display:block;font-size:16px;font-weight:600}
.li-band-link .more-go{margin-top:2px;font-size:14px;color:var(--on-dark-2);transition:color .2s}
.li-band-link:hover .more-go{color:var(--on-dark)}
.rec-section{padding:22px 0 clamp(56px,7vw,96px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid rgba(13,16,19,.14);border-radius:999px;background:rgba(255,255,255,.6);color:var(--ink-2);font:500 14px/1 var(--sans);cursor:pointer;transition:all .2s}
.chip span{font-size:12.5px;color:var(--text-3)}
.chip:hover{border-color:var(--ink-2);color:var(--ink);background:#fff}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] span{color:var(--on-dark-2)}
/* Cards are dealt into columns in reading order (row by row), so rank order is visible across the row */
.rec-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:18px;align-items:start}
.rec-col{display:grid;gap:18px;align-content:start;min-width:0}
.rec{display:flex;flex-direction:column;padding:20px 24px;border-radius:18px;background:var(--card);box-shadow:var(--lift);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.rec:hover{transform:translateY(-2px);box-shadow:var(--lift-hover)}
.rec-mark{display:block;height:28px;font:400 52px/1 var(--serif);color:#a3aeb7}
/* quotes in the text face: the display serif is too heavy for paragraphs */
.rec-q{margin:0;font:400 17px/1.6 var(--sans);color:#2b3238}
/* "Read more" continues the quote inline */
.rec-more{display:inline;padding:0;margin-left:4px;border:0;border-bottom:1px solid var(--line-2);background:none;font:500 14px/1.2 var(--sans);color:var(--slate);cursor:pointer;white-space:nowrap;vertical-align:1px;transition:color .2s,border-color .2s}
.rec-more:hover{color:var(--ink);border-color:var(--ink)}
.rec-person{margin-top:18px;padding-top:14px;border-top:1px solid #e3e7ea}
.rec-name{display:flex;align-items:center;gap:6px}
.rec-name b{font-size:15px;font-weight:600}
.rec-person>span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--text-3)}
.rec-li{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;color:#0a66c2;transition:background-color .2s}
.rec-li:hover{background:#e8f0f9}
.rec-li svg{width:15px;height:15px}
.link-btn{padding:4px 0;border:0;border-bottom:1px solid var(--line-2);background:none;color:var(--ink);font:500 13.5px/1 var(--sans);white-space:nowrap;cursor:pointer}
.link-btn:hover{border-color:currentColor}

/* Articles: white tiles on the grey surface, in LinkedIn order; the topic strip separates meta from the title */
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:var(--card);box-shadow:var(--lift);cursor:pointer;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.article:hover{transform:translateY(-2px);box-shadow:var(--lift-hover)}
.article-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px 11px 22px;background:var(--tint);border-bottom:1px solid #e1e6ea}
.topic{font:600 13px/1.2 var(--sans);color:var(--ink-2)}
.posted{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--text-3);white-space:nowrap}
/* sits above the card-wide link so it opens the original post */
.li-btn{position:relative;z-index:1;display:inline-grid;place-items:center;width:30px;height:30px;margin-left:4px;border-radius:8px;color:#0a66c2;transition:background-color .2s}
.li-btn:hover{background:#dde8f5}
.li-btn svg{width:16px;height:16px}
.article-body{display:flex;flex:1;flex-direction:column;gap:12px;padding:20px 22px 20px}
.article h3{font:400 clamp(22px,1.7vw,25px)/1.24 var(--serif);letter-spacing:-.008em}
.article-link{text-decoration:none}
/* the title link covers the whole card, so a click anywhere opens the article */
.article-link::after{content:"";position:absolute;inset:0}
.article:hover .article-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.excerpt{margin:0 0 4px;font-size:15.5px;line-height:1.6;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.read-cue{display:inline-flex;gap:6px;margin-top:auto;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.read-cue span{transition:transform .3s var(--ease)}
.article:hover .read-cue{color:var(--ink)}
.article:hover .read-cue span{transform:translateX(4px)}
.article-more{justify-content:space-between;gap:16px;min-height:220px;padding:24px;background:var(--panel);color:var(--on-dark);text-decoration:none}
.article-more h3{color:var(--on-dark)}
.reader{width:min(760px,calc(100vw - 24px))}
.reader .d-inner{max-height:min(88vh,900px);padding:clamp(24px,4.5vw,52px)}
.reader .d-top{justify-content:space-between}
.a-meta{font-size:14px;color:var(--text-3)}
.reader h2{font:400 clamp(28px,3.4vw,40px)/1.12 var(--serif);letter-spacing:-.012em}
.a-dek{margin:12px 0 0;font:400 20px/1.35 var(--serif);color:var(--text-2)}
.a-body{margin-top:26px}
.a-body p,.a-body li{font-size:17.5px;line-height:1.75;color:var(--ink-2)}
.a-body p{margin:0 0 18px}
.a-body h3{margin:30px 0 10px;font:400 24px/1.25 var(--serif);color:var(--ink)}
.a-body ul{margin:0 0 18px;padding-left:22px}
.a-body li{margin-bottom:8px}
.a-related{padding-top:16px;border-top:1px solid var(--line)}
.a-related a{font-weight:500}
.a-note{font-size:14px;color:var(--text-3)}

/* Contact: the Codex footer gradient as a full screen */
.contact-page{display:flex;align-items:center;min-height:100vh;padding:calc(var(--header) + 24px) 0 56px;background:var(--fade-x)}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:55px;align-items:center}
.contact-intro h1{color:var(--on-dark);font:400 clamp(52px,5.6vw,84px)/1 var(--serif);letter-spacing:-.02em}
.contact-intro p{margin:16px 0 0;font-size:17px;color:var(--on-dark-2)}
/* contacts sit on the light end of the gradient */
.contacts{justify-self:end;display:grid;width:min(100%,580px);min-width:0}
.contact{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:18px;padding:18px 0;color:#26343e;text-decoration:none;border-bottom:1px solid #98a7b277}
.contact:first-child{border-top:1px solid #98a7b277}
.contact:hover{color:#08090a;border-bottom-color:#52616c}
.contact span{font-size:clamp(17px,1.4vw,21px);overflow-wrap:anywhere}
.contact small{display:block;margin-bottom:4px;font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#53636f}
.contact svg{display:block;width:22px;height:22px}
.contact .arrow{width:17px;height:17px;color:#53636f}

/* Dialogs */
dialog{width:min(680px,calc(100vw - 32px));max-width:none;padding:0;border:0;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(8,9,10,.5)}
dialog::backdrop{background:rgba(8,9,10,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.d-inner{max-height:min(82vh,760px);overflow:auto;padding:clamp(24px,4vw,40px)}
.d-top{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-bottom:12px}
.d-close{width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.d-close:hover{border-color:var(--ink)}
.d-text p{margin:0 0 16px;font:400 17.5px/1.7 var(--sans);color:var(--ink-2)}
.d-text p:first-child{font:500 19px/1.55 var(--sans);color:var(--ink)}
.d-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.d-bottom .rec-person{margin:0;padding:0;border:0}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--line-2);padding-bottom:3px;white-space:nowrap;transition:border-color .2s}
.text-link:hover{border-color:var(--ink)}

/* Motion */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}

/* Responsive */
@media (max-width:1100px){
  .articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vt-products{grid-template-columns:1fr}
}
@media (max-width:1000px){
  /* phones and tablets: a white header block at the top of the page with all six tabs in a 3 × 2 grid;
     it sits in the page flow and scrolls away with it, so nothing needs room under an overlay header */
  :root{--header:0px}
  .site-header,.site-header.scrolled{position:relative;background:#fff;box-shadow:0 1px 0 rgba(13,16,19,.1);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav{height:auto;padding:10px 0}
  /* columns share the width equally but never get narrower than their longest word ("Recommendations") */
  .nav-links{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));gap:6px;width:100%;max-width:520px;margin-inline:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:4px 8px;font-size:13px;line-height:1.15;text-align:center;white-space:normal}
  .menu-btn,.mobile-nav{display:none}
  .road-section{padding-top:28px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;background:var(--paper)}
  /* phones: a shorter photo and compact text, so the name, role and all four results fit on the first screen */
  /* the photo takes what is left of the visible screen after the header (~106px) and the text (~234px),
     tall enough to show Vitali head to toe; the text starts below the photo and the name sits on one line */
  .hero-photo{height:clamp(200px,calc(100vh - 340px),420px);height:clamp(200px,calc(100svh - 340px),420px);background:var(--black);-webkit-mask-image:none;mask-image:none}
  .hero-photo img{object-position:50% 60%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(8,9,10,.4) 0%,rgba(8,9,10,0) 16%,rgba(8,9,10,0) 90%,rgba(243,245,247,.55) 96%,var(--paper) 100%)}
  .hero-copy{justify-self:stretch;width:auto;margin-top:2px;padding:0 var(--gutter) 12px}
  .hero h1{font-size:31px}
  .hero h1 br{display:none}
  .hero-role{margin:8px 0 1px;font-size:15px}
  .hero-loc{font-size:12.5px}
  .results{margin-top:12px}
  .result{padding:8px 8px 8px 0}
  .result:nth-child(even){padding-left:12px}
  .result b{font-size:23px}
  .result span{margin-top:3px;font-size:11.5px;line-height:1.3}
  .road-here{display:none}
  html:has(body.cases){scroll-snap-type:none}
  body.cases main{padding-top:calc(var(--header) - 8px)}
  .case-slide{padding-top:20px}
  .case{grid-template-columns:1fr}
  .case-meta{grid-template-columns:1fr 1fr}
  .case-quote{margin-top:4px}
  /* stacked card: the photo becomes a block between the role and the quote; the quote overlaps its lower part */
  .case-photo{position:relative;inset:auto;height:min(105vw,420px);margin:-6px calc(-1*clamp(24px,2.4vw,36px)) -150px}
  .case-photo img{height:100%}
  .story{grid-template-columns:1fr;gap:16px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .facts div:nth-child(n+3){margin-top:18px;border-top:1px solid var(--line)}
  /* phones: newest first. VTrust and its products open the page, then the road runs from now back to 2009 */
  body.chapter main{display:flex;flex-direction:column}
  body.chapter .vt-section{order:-1;padding:28px 0 8px}
  .road{display:flex;flex-direction:column-reverse}
  .road::before{left:7px;right:auto;top:8px;bottom:24px;width:2px;height:auto;background:linear-gradient(0deg,#c9d1d8 0%,#8d99a3 45%,#3e474f 75%,#0d1013 100%)}
  .stop{padding:0 0 44px 44px}
  .stop:first-child{padding-bottom:0}
  /* the road starts at the 2009 node: hide the line below it */
  .stop:first-child::after{content:"";position:absolute;left:4px;top:19px;bottom:0;width:8px;background:var(--paper)}
  .stop::before{top:3px}
  .stop-years{position:static;display:block;margin-bottom:8px}
  .stop.now::before{top:-1px}
  .now-card{margin-top:4px}
  .vt-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .contact-page{display:block;min-height:0;padding:0 0 48px;background:var(--paper)}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .contact-intro{margin-inline:calc(-1*var(--gutter));padding:calc(var(--header) + 48px) var(--gutter) 64px;background:linear-gradient(180deg,#08090a 0%,#1c2227 60%,#6c7883 84%,var(--paper) 100%)}
  .contacts{justify-self:stretch;width:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .case-meta{gap:24px}
  .proof a{grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"time icon" "t icon" "by icon";gap:2px 12px}
  .proof time{grid-area:time}
  .proof .t{grid-area:t}
  .proof .by{grid-area:by;white-space:normal}
  .proof .li{grid-area:icon}
  .articles{grid-template-columns:1fr}
  .article-more{min-height:0}
}