:root{
  --bg:#0A0F14; --panel:#111A21; --raised:#16232C; --rule:#25333D;
  --ink:#E8F0F5; --muted:#9CB0BC; --amber:#FFB454; --green:#5EE0A0; --cyan:#6FD3FF;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Arial,Helvetica,sans-serif;
  --max:1152px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.6;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:96px 96px;background-position:-1px -1px;background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(10,15,20,.82) 100%);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:var(--cyan)}
a:hover{color:#A8E4FF}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.lbl{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lbl-amber{color:var(--amber)}.lbl-green{color:var(--green)}

/* top rail */
.top{position:sticky;top:0;z-index:5;background:rgba(10,15,20,.94);border-bottom:1px solid var(--rule);backdrop-filter:blur(3px)}
.top .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding-top:11px;padding-bottom:11px}
.brand{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;margin:0;overflow-wrap:anywhere}
.brand b{color:var(--ink);font-weight:700}
.brand span{color:var(--muted)}
nav ul{display:flex;flex-wrap:wrap;gap:5px 14px;list-style:none;margin:0;padding:0}
nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:6px 2px}
nav a:hover,nav a:focus-visible{color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:44px;align-items:start;padding:38px 0 56px;border-bottom:1px solid var(--rule)}
h1{font-size:clamp(36px,6vw,72px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;font-weight:700}
.role{font-size:clamp(18px,2.2vw,26px);margin:0 0 6px;font-weight:700}
.sub{color:var(--muted);margin:0 0 22px}
.lede{font-size:19px;max-width:34em;margin:0 0 26px}
.lede strong{color:var(--amber);font-weight:700}
.cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:14px 20px;border:1px solid var(--amber);color:var(--bg);background:var(--amber);font-weight:700;min-height:44px}
.btn:hover{color:var(--bg)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* instrument panel */
.panel{background:var(--panel);border:1px solid var(--rule)}
.panel-hd{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--raised)}
.gate{padding:16px 16px 6px;counter-reset:g}
.gate ol{list-style:none;margin:0;padding:0}
.gate li{position:relative;padding:13px 16px 13px 0;border-top:1px solid var(--rule)}
.gate li:first-child{border-top:0}
.gate .step{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.gate .note{font-size:14px;color:var(--muted);margin-top:3px}
.gate li::after{content:"";position:absolute;left:0;bottom:-11px;width:1px;height:11px;background:var(--rule)}
.gate li:last-child::after{display:none}
.node{border:1px solid var(--amber);box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--amber);padding:14px 16px}
.node .step{color:var(--amber)}
.node::before{content:"HUMAN";position:absolute;right:0;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber)}
.panel-ft{padding:12px 16px;border-top:1px solid var(--rule);background:var(--raised);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---- v4 dynamics layer ---- */

/* per-section accent */
#about{--acc:var(--green)}#work{--acc:var(--amber)}#experience{--acc:var(--cyan)}
#toolkit{--acc:var(--amber)}#credentials{--acc:var(--green)}#education{--acc:var(--cyan)}#contact{--acc:var(--amber)}

/* bigger hero; letters are visible before motion is enabled */
.hero{min-height:0;align-items:start;padding:38px 0 56px}
h1{font-size:clamp(44px,8.4vw,124px);line-height:.94;margin-bottom:10px}
h1 .w{display:inline-block}
@keyframes letter{from{opacity:0;translate:0 .38em}to{opacity:1;translate:0 0}}

/* scroll-spy rail */
.mark{position:fixed;left:0;top:calc(50% - 119px + var(--i) * 34px);width:30px;height:2px;background:#2F3F4B;z-index:6;pointer-events:none}
.mark::after{content:attr(data-label);position:absolute;left:42px;top:-8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);opacity:0;white-space:nowrap}

/* signal chain */
.flow{display:flex;align-items:center;margin:6px 0 12px;flex-wrap:wrap}
.flow .n{border:1px solid var(--rule);background:var(--raised);padding:10px 14px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.flow .c{position:relative;flex:1 1 64px;min-width:44px;height:1px;background:var(--rule)}
.flow .c::after{content:"";position:absolute;inset:0;background:var(--amber);transform-origin:0 50%;transform:scaleX(1)}
.flow-cap{margin:0 0 30px;font-size:11.5px;letter-spacing:.08em;color:var(--muted)}

/* segmented progress gauge */
.progress{background-image:repeating-linear-gradient(90deg,var(--amber) 0 14px,transparent 14px 19px);background-color:transparent}

/* case cards: sweep + charged border */
article.case{background-image:linear-gradient(115deg,rgba(255,180,84,.09),transparent 58%);background-repeat:no-repeat;
  background-size:0% 100%}
article.case:hover,article.case:focus-within{background-size:100% 100%}
article.case:hover{border-top-color:var(--acc)}

/* ---- reference techniques adopted from the Site of Sites shortlist ---- */

/* outlined display lettering */
h1 .outline{color:transparent;-webkit-text-stroke:1.6px var(--amber)}
@supports not (-webkit-text-stroke:1px #000){h1 .outline{color:var(--amber)}}

/* underline that wipes in on hover */
a:not(.btn):not(.brand){background-image:linear-gradient(currentcolor,currentcolor);background-repeat:no-repeat;
  background-position:right bottom;background-size:0% 1px}
a:not(.btn):not(.brand):hover,a:not(.btn):not(.brand):focus-visible{background-position:left bottom;background-size:100% 1px}

/* chromatic aberration on hover */
.hero h1:hover{filter:drop-shadow(2px 0 0 rgba(255,180,84,.5)) drop-shadow(-2px 0 0 rgba(111,211,255,.45))}
article.case:hover h3,article.case:focus-within h3{filter:drop-shadow(1px 0 0 rgba(255,180,84,.62)) drop-shadow(-1px 0 0 rgba(111,211,255,.55))}

/* one marquee strip; static fallback wraps all tools */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:0 0 34px}
.marquee-track{display:block;width:auto}
.marquee-track ul{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:0;padding:0}
.marquee-track ul[aria-hidden="true"]{display:none}
.marquee-track li{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- motion layer: all CSS, no script ---- */
.progress{display:none;position:fixed;top:0;left:0;right:0;height:2px;background:var(--amber);transform-origin:0 50%;z-index:20}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.typing{font-family:var(--mono);font-size:12.5px;color:var(--green);margin:0;padding:10px 16px 0;
  white-space:normal;overflow:hidden;width:auto;border-right:0}
@keyframes type{from{width:0}to{width:36ch}}
@keyframes caret{50%{border-right-color:transparent}}

.hero>.panel{position:relative;overflow:hidden}
.hero>.panel::after{content:"";position:absolute;left:0;right:0;height:80px;pointer-events:none;top:-80px;
  background:linear-gradient(180deg,transparent,rgba(255,180,84,.07),transparent)}
@keyframes sweep{from{top:-80px}to{top:100%}}
@keyframes gate{0%,100%{box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--amber)}50%{box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--amber),0 0 0 4px rgba(255,180,84,.16)}}
@keyframes boot{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* All timed motion and transitions require the user's motion preference. */
@media (prefers-reduced-motion: no-preference){
  h1 .w{animation:letter .62s cubic-bezier(.2,.7,.2,1) both}
  h1 .w:nth-child(1){animation-delay:0.04s}
  h1 .w:nth-child(2){animation-delay:0.08s}
  h1 .w:nth-child(3){animation-delay:0.12s}
  h1 .w:nth-child(4){animation-delay:0.16s}
  h1 .w:nth-child(5){animation-delay:0.20s}
  h1 .w:nth-child(6){animation-delay:0.24s}
  h1 .w:nth-child(7){animation-delay:0.28s}
  h1 .w:nth-child(8){animation-delay:0.32s}
  h1 .w:nth-child(9){animation-delay:0.36s}
  h1 .w:nth-child(10){animation-delay:0.40s}
  h1 .w:nth-child(11){animation-delay:0.44s}
  h1 .w:nth-child(12){animation-delay:0.48s}
  h1 .w:nth-child(13){animation-delay:0.52s}
  article.case{transition:background-size .45s ease,border-top-color .2s ease}
  a:not(.btn):not(.brand){transition:background-size .3s ease,background-position 0s .3s}
  a:not(.btn):not(.brand):hover,a:not(.btn):not(.brand):focus-visible{transition:background-size .3s ease}
  .hero h1{transition:filter .18s ease}
  article.case h3{transition:filter .16s ease}
  article.case::before,article.case::after{transition:opacity .18s ease}
  .marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
  .marquee-track ul{flex-wrap:nowrap;gap:44px;padding:0 44px 0 0}
  .marquee-track ul[aria-hidden="true"]{display:flex}
  .typing{white-space:nowrap;width:0;border-right:1px solid var(--green);
    animation:type 2.4s steps(36,end) .8s forwards, caret .9s steps(1) 3.2s infinite}
  .hero>.panel::after{animation:sweep 7s linear 1.2s infinite}
  .hero>div>*, .hero>.panel .panel-hd, .gate li, .panel-ft{animation:boot .68s cubic-bezier(.2,.7,.2,1) both}
  .hero .lbl{animation-delay:.05s}.hero h1{animation-delay:.10s}.hero .role{animation-delay:.16s}
  .hero .sub{animation-delay:.20s}.hero .lede{animation-delay:.26s}.hero .cta{animation-delay:.34s}
  .gate li:nth-child(1){animation-delay:.42s}.gate li:nth-child(2){animation-delay:.5s}
  .gate li:nth-child(3){animation:boot .68s cubic-bezier(.2,.7,.2,1) .58s both,gate 3.6s ease-in-out infinite}
  .gate li:nth-child(4){animation-delay:.66s}
  .panel-hd{animation-delay:.3s}.panel-ft{animation-delay:.8s}
  details ul{animation:fade .24s ease both}
  @supports (animation-timeline: scroll()){
    .progress{display:block;animation:grow 1s steps(24,end) both;animation-timeline:scroll(root)}
  }
  @supports (animation-timeline: view()){
    section{view-timeline-name:--sec}
    .sec-hd h2{animation:slidein linear both;animation-timeline:view();animation-range:entry 0% entry 26%}
    .mark{animation:markon linear both;animation-timeline:--sec;animation-range:contain 0% contain 55%}
    .mark::after{animation:labelon linear both;animation-timeline:--sec;animation-range:contain 0% contain 35%}
    .hero{animation:heroout linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .flow .n{animation:nodeon linear both;animation-timeline:view();animation-range:entry 25% entry 60%}
    .flow .c::after{transform:scaleX(0);animation:draw linear both;animation-timeline:view();animation-range:entry 20% entry 75%}
    .flow .c:nth-of-type(2)::after{animation-range:entry 30% entry 85%}
    .flow .c:nth-of-type(4)::after{animation-range:entry 40% entry 95%}
    section{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 22%}
    .sec-hd h2{position:relative}
    .sec-hd h2::after{content:"";position:absolute;left:0;bottom:-8px;height:1px;width:100%;background:var(--acc,var(--rule));
      transform-origin:0 50%;animation:draw linear both;animation-timeline:view();animation-range:entry 0% entry 16%}
    article.case{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 26%}
    article.case:nth-child(2){animation-range:entry 3% entry 30%}
    article.case:nth-child(3){animation-range:entry 6% entry 34%}
    article.case:nth-child(4){animation-range:entry 9% entry 38%}
    .emp{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 20%}
    .tools li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 16%}
  }
}
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes slidein{from{opacity:.15;translate:-22px 0}to{opacity:1;translate:0 0}}
@keyframes markon{from{background:var(--rule);width:22px}to{background:var(--acc,var(--amber));width:44px}}
@keyframes labelon{from{opacity:0}to{opacity:1}}
@keyframes heroout{to{opacity:.12;translate:0 -46px;scale:.975}}
@keyframes nodeon{from{border-color:var(--rule);color:var(--muted)}to{border-color:var(--acc,var(--amber));color:var(--ink)}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* targeting reticle on case cards */
article.case{position:relative}
article.case::before,article.case::after{content:"";position:absolute;width:12px;height:12px;opacity:0}
article.case::before{top:-1px;left:-1px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
article.case::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}
article.case:hover::before,article.case:hover::after,article.case:focus-within::before,article.case:focus-within::after{opacity:1}
@keyframes fade{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
summary:hover{color:#A8E4FF}

/* sections */
section{padding:64px 0;border-bottom:1px solid var(--rule)}
.sec-hd{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
h2{font-size:clamp(24px,3vw,30px);margin:0;font-weight:700;letter-spacing:-.01em}
.sec-note{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.08em}
.sec-intro{color:var(--muted);max-width:60em;margin:14px 0 30px}
h3{font-size:clamp(20px,2.4vw,26px);margin:0 0 8px;font-weight:700}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

/* case studies */
article.case{background-color:var(--panel);border:1px solid var(--rule);padding:24px;border-top:2px solid var(--rule)}
article.case:hover{border-top-color:var(--amber)}
.case .own{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:0 0 12px}
.case p{margin:0 0 14px;font-size:17px}
.case dl{margin:0 0 14px}
.case dt{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:14px}
.case dd{margin:4px 0 0;color:var(--ink)}
details{border-top:1px solid var(--rule);padding-top:12px;margin-top:16px}
summary{cursor:pointer;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);min-height:44px;display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-size:16px;color:var(--amber)}
details[open] summary::before{content:"\2212"}
details ul{margin:12px 0 0;padding-left:20px;color:var(--muted)}
details li{margin-bottom:6px}

/* experience */
.emp{border-top:1px solid var(--rule);padding:22px 0}
.emp:first-of-type{border-top:2px solid var(--rule)}
.emp-hd{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between}
.emp-hd h3{margin:0}
.emp-hd .loc{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.roles{margin:14px 0 0;padding:0;list-style:none}
.roles>li{border-left:1px solid var(--rule);padding:0 0 14px 18px;margin-left:4px}
.roles .t{font-weight:700}
.roles .d{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.roles p{margin:6px 0 0;color:var(--muted);font-size:16px}

/* toolkit */
.tools h4{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 10px}
.tools ul{list-style:none;margin:0;padding:0}
.tools li{font-size:16px;padding:7px 0;border-bottom:1px dashed var(--rule);color:var(--ink)}
.tools li span{color:var(--muted)}

/* education and credentials */
.edu li{margin-bottom:16px}
.edu .meta{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

.note{background:var(--raised);border:1px solid var(--rule);padding:20px;margin-top:26px}
.note p{margin:0 0 12px;font-size:16.5px}

/* contact */
.contact{border-bottom:0}
.contact .big{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:8px}
footer{border-top:1px solid var(--rule);padding:26px 0 40px;color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}

/* responsive layout */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:34px;padding:44px 0 40px}
  .grid2,.grid4{grid-template-columns:1fr}
  section{padding:48px 0}
  .top{position:static}
}
.hero .panel-hd .lbl{white-space:nowrap;font-size:11.5px}
@media (max-width:760px){.hero .panel-hd .lbl{white-space:normal}}
@media (max-width:1180px){.mark{display:none}}
@media (max-width:920px){.typing{font-size:11.5px}
  .hero{min-height:0;padding:44px 0 40px}.flow .c{min-width:28px}}

/* Print reveals every letter, connector and closed disclosure. */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important;opacity:1!important;
    translate:none!important;transform:none!important;scale:none!important;filter:none!important}
  body{background-image:none;background-attachment:scroll}
  body::before,.hero>.panel::after,.marquee,.mark,.progress{display:none!important}
  .top{position:static}
  .hero,.grid2,.grid4{display:block}
  h1 .outline{color:var(--ink)!important;-webkit-text-stroke:0!important}
  h1 .w{display:inline-block!important}
  .flow .c::after{transform:scaleX(1)!important}
  .typing{width:auto;white-space:normal;border-right:0}
  details{break-inside:avoid}
  details::details-content{display:block!important;content-visibility:visible!important;height:auto!important}
  details>summary{display:none!important}
  details>*:not(summary){display:block!important;content-visibility:visible!important}
}
@media (forced-colors:active){
  .progress{display:none}
  h1 .outline{color:CanvasText;-webkit-text-stroke:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .progress{display:none}.typing{width:auto;border-right:0}
  .marquee{overflow:visible}.marquee-track{display:block;animation:none;width:auto}
  .marquee-track ul{flex-wrap:wrap;padding:0;gap:12px 28px}
  .marquee-track ul[aria-hidden="true"]{display:none}
  h1 .outline{color:var(--ink);-webkit-text-stroke:0}
  h1 .w{animation:none;opacity:1;filter:none;translate:0}
  .mark{display:none}
  .flow .c::after{transform:scaleX(1)}}