*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
::selection{background:var(--accent);color:var(--on-accent,#fff)}
:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--max,1120px);margin:0 auto;padding:0 var(--gut,24px)}
.error{padding:48px 24px;font-weight:700}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--top-bg,var(--paper)) 92%,transparent);backdrop-filter:blur(8px)}
.top .in{max-width:var(--max,1120px);margin:0 auto;padding:0 var(--gut,24px);min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.top .brand{font-weight:700;text-decoration:none;white-space:nowrap;font-size:1.0625rem;letter-spacing:-.01em}
.top nav{display:flex;gap:2px}
.top nav a{text-decoration:none;font-size:.9375rem;font-weight:600;padding:10px 12px;white-space:nowrap}
.top nav a:hover{color:var(--note,var(--accent))}
.top .menu{display:none;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:.875rem;cursor:pointer;border-radius:var(--btn-r,999px)}
@media (max-width:640px){
  .top .menu{display:inline-flex}
  .top nav{display:none;position:absolute;left:var(--gut,24px);right:var(--gut,24px);top:calc(100% + 4px);flex-direction:column;gap:0;padding:8px;background:var(--menu-bg,var(--card,#fff));color:var(--menu-ink,var(--ink));border:1.5px solid var(--menu-ink,var(--ink));box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
  .top nav.open{display:flex}
  .top nav a{padding:13px 14px;font-size:1rem}
}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1.5px solid var(--ink);border-radius:var(--btn-r,999px);text-decoration:none;font-weight:700;font-size:.9375rem;white-space:nowrap;background:transparent;color:var(--ink);transition:background .2s,color .2s,border-color .2s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);color:var(--paper)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.st{display:inline-block;font-size:.75rem;font-weight:700;line-height:1.3;white-space:nowrap;color:var(--note,var(--accent));border:1.5px solid currentColor;padding:2px 9px;border-radius:999px}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;list-style:none}
.flow li{display:flex;align-items:center;gap:4px}
.flow .node{font-weight:700;font-size:.8125rem;line-height:1.2;padding:6px 10px;border:1.5px solid var(--ink);background:var(--card,transparent);white-space:nowrap}
.flow .arrow{width:26px;height:14px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow.down{flex-direction:column;align-items:flex-start;gap:6px}
.flow.down li{flex-direction:column;align-items:flex-start;gap:6px}
.flow.down .arrow{transform:rotate(90deg);margin-left:16px}
.swim{display:block;width:100%;height:auto}
.swim .lane{fill:none;stroke:var(--lane,var(--line));stroke-width:1;stroke-dasharray:3 4}
.swim .lane-l{font-family:var(--hand);font-size:var(--lane-fs,16px);font-weight:var(--hand-w,600);fill:var(--note,var(--accent))}
.swim .box{fill:var(--box,var(--card,#fff));stroke:var(--ink);stroke-width:1.5}
.swim .box-l{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.swim .link,.swim .head{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portrait{position:relative;overflow:hidden;aspect-ratio:4/5;container-type:inline-size}
.portrait .ph{position:absolute;left:0;bottom:-6px;width:100%;height:calc(100% + 6px);object-fit:cover;object-position:bottom;z-index:2}
.portrait svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.portrait svg.back{z-index:1}
.portrait .fr{fill:none;stroke:var(--ink);stroke-width:2.4}
.portrait .ht{stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.portrait.mono{display:grid;place-items:center}
.portrait .ak{position:relative;z-index:2;font-family:var(--mono-font,var(--sans));font-weight:700;font-size:44cqw;line-height:1;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .portrait .fr{stroke-dasharray:3000;stroke-dashoffset:3000;animation:p-draw 1.8s .1s ease-out forwards}
  .portrait .ht line{stroke-dasharray:300;stroke-dashoffset:300;animation:p-draw 1.2s ease-out forwards;animation-delay:var(--d,0s)}
  .portrait .base{opacity:0;transform:translateY(22px);animation:p-drop 1s 1.1s cubic-bezier(.2,.8,.2,1) forwards,p-float 7s 2.2s ease-in-out infinite}
  @keyframes p-draw{to{stroke-dashoffset:0}}
  @keyframes p-drop{to{opacity:1;transform:none}}
  @keyframes p-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
}
.sticky{position:relative}
.sticky .face{position:absolute;right:22px;top:18px;width:clamp(64px,18%,84px);height:auto;aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 14px -8px rgba(29,35,48,.45);transform:rotate(4deg);pointer-events:none}
.sticky .face~h2,.sticky .face~.mail{padding-right:clamp(72px,24%,104px)}
@media (max-width:600px){.sticky .face{width:56px;right:14px;top:14px}}
.logo{display:flex;align-items:center;height:40px}
.logo img{height:22px;width:auto;max-width:130px;object-fit:contain;object-position:left}
.logo img[src*="working-page"]{height:40px}
.logo img[src*="deloitte"]{height:30px}
.logo img[src*="freewheel"]{height:15px}
.logo img[src*="openx"]{height:20px}
.logo img[src*="hudson-mx"]{height:34px}
.logo .wordmark{font-weight:800;font-size:.9375rem;line-height:1;letter-spacing:-.01em}