@font-face{font-family:'Noto Sans Georgian';src:url(/fonts/noto-georgian.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31}
@font-face{font-family:Inter;src:url(/fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;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:'JetBrains Mono';src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');font-weight:100 800;font-style:normal;font-display:swap;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}

:root{
  --bg:#0B0E10;
  --panel:#12171A;
  --panel-2:#171D21;
  --ink:#E4E9EC;
  --soft:#8C979E;
  --faint:#78838B;
  --rule:#1E262B;
  --rule-2:#273137;
  --acc:#5EE6A8;
  --acc-ink:#06120C;
  --warn:#E8B35E;

  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad:2rem;
  --wide:72rem;
  --measure:38rem;

  color-scheme:dark;
}

*,*::before,*::after{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:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(94,230,168,.35)}
a:hover{border-bottom-color:var(--acc)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

.mono{font-family:var(--mono)}
.wrap{max-width:var(--wide);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--acc-ink);
  padding:.6rem 1rem;font-weight:600;z-index:10;border:0}
.skip:focus{left:.5rem;top:.5rem}

/* ---------------- masthead ---------------- */

.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;
  flex-wrap:wrap;padding-top:.9rem;padding-bottom:.9rem}
.brand{font-family:var(--mono);font-size:.92rem;color:var(--ink);border:0;letter-spacing:.01em}
.brand b{color:var(--acc);font-weight:500}
.brand:hover{border:0}
.bar nav ul{display:flex;gap:1.45rem;list-style:none;margin:0;padding:0;font-size:.88rem;flex-wrap:wrap}
.bar nav a{color:var(--soft);border-bottom:1px solid transparent;position:relative}
/* hit area to 24px minimum (WCAG 2.2 SC 2.5.8) without changing how the link looks */
.bar nav a::after{content:"";position:absolute;inset:-5px -3px}
.bar nav a:hover{color:var(--ink);border-bottom-color:var(--rule-2)}
.bar nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--acc)}

/* ---------------- hero ---------------- */

.hero{padding:4.5rem 0 3.75rem}
.status{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);
  border:1px solid rgba(94,230,168,.45);border-radius:100px;padding:.3rem .85rem;margin-bottom:1.9rem}
.status i{width:6px;height:6px;border-radius:50%;background:var(--acc);display:block;flex:none}

h1{font-size:clamp(2rem,1.05rem+3.4vw,3.35rem);line-height:1.07;letter-spacing:-.033em;
  font-weight:600;margin:0 0 1.35rem;max-width:20ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--acc)}
.hero .lede{color:var(--soft);font-size:1.06rem;max-width:40rem;margin:0 0 2.2rem}

.go{display:inline-block;background:var(--acc);color:var(--acc-ink);font-weight:600;
  font-size:.92rem;padding:.72rem 1.35rem;border-radius:3px;border:1px solid var(--acc);
  transition:background 140ms ease,border-color 140ms ease}
.go:hover{background:#7CEFBA;border-color:#7CEFBA}
.go.ghost{background:transparent;color:var(--acc);border-color:var(--rule-2)}
.go.ghost:hover{background:transparent;border-color:var(--acc)}
.cta-row{display:flex;gap:1rem 1.4rem;align-items:center;flex-wrap:wrap}

/* ---------------- sections ---------------- */

section{border-top:1px solid var(--rule)}
section > .wrap{padding-top:3.5rem;padding-bottom:3.5rem}

.sec-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 2rem;max-width:none;font-weight:400;line-height:1.5}

h2{font-size:1.5rem;line-height:1.25;letter-spacing:-.022em;font-weight:600;margin:0 0 1rem;max-width:26ch}
h3{font-size:1rem;font-weight:600;margin:0 0 .45rem;letter-spacing:-.005em}
p{max-width:var(--measure)}
.soft{color:var(--soft)}

/* three-cell grid with hairline dividers */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cell{padding:1.75rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cell .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:.8rem}
.cell .k em{font-style:normal;color:var(--acc)}
.cell p{margin:0;font-size:.9rem;color:var(--soft);line-height:1.58;max-width:none}

/* numbered steps */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;max-width:46rem}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:2.8rem 1fr;gap:0 .9rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule)}
ol.steps li:first-child{border-top:1px solid var(--rule)}
ol.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:.8rem;color:var(--faint);padding-top:.25rem}
ol.steps p{margin:0;color:var(--soft);font-size:.94rem;max-width:none}
ol.steps strong{color:var(--ink);font-weight:600}

/* callout */
.note{background:var(--panel);border-left:2px solid var(--acc);padding:1.3rem 1.5rem;max-width:44rem}
.note p{margin:0;color:var(--soft);font-size:.95rem;max-width:none}
.note b{color:var(--ink);font-family:var(--mono);font-weight:500}
.note.plain{border-left-color:var(--rule-2)}

/* markers */
.markers{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.75rem;
  margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--rule)}
.marker .num{font-family:var(--mono);font-size:1.8rem;font-weight:500;letter-spacing:-.02em;
  display:block;line-height:1.15;color:var(--ink)}
.marker .cap{font-size:.87rem;color:var(--soft);display:block;margin-top:.35rem;max-width:20rem}

/* bullet list */
ul.plain{list-style:none;margin:0;padding:0;max-width:46rem}
ul.plain li{position:relative;padding:.62rem 0 .62rem 1.5rem;border-bottom:1px solid var(--rule);
  color:var(--soft);font-size:.94rem}
ul.plain li:first-child{border-top:1px solid var(--rule)}
ul.plain li::before{content:'';position:absolute;left:.15rem;top:1.15rem;width:5px;height:5px;
  background:var(--acc);border-radius:1px}

/* tag row */
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none;max-width:52rem}
.tags li{font-family:var(--mono);font-size:.78rem;color:var(--soft);border:1px solid var(--rule-2);
  border-radius:3px;padding:.24rem .6rem}

/* stack groups */
.stack-group{padding:1.1rem 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(8rem,11rem) 1fr;gap:.4rem 1.5rem}
.stack-group:first-of-type{border-top:1px solid var(--rule)}
.stack-group dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding-top:.2rem}
.stack-group dd{margin:0;color:var(--soft);font-size:.94rem}

/* timeline */
.job{padding:1.6rem 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(8rem,10rem) 1fr;gap:.5rem 1.75rem}
.job:first-of-type{border-top:1px solid var(--rule)}
.job .when{font-family:var(--mono);font-size:.82rem;color:var(--faint);padding-top:.2rem}
.job h3{margin:0 0 .15rem}
.job .role{color:var(--acc);font-size:.87rem;font-family:var(--mono);margin:0 0 .6rem;max-width:none}
.job p{margin:0;color:var(--soft);font-size:.93rem;max-width:36rem}

/* The layer descent, drawn rather than asserted. The point is made by the shape:
   the middle column is four separate boxes, the right one is a single box the
   same height. No inline styles anywhere — CSP here is style-src 'self'. */
.descent{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.descent-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:0 3rem;margin-top:2.5rem}
.descent-cols p{max-width:34rem}

.split-map{display:grid;gap:.4rem 1.25rem;margin-top:1.5rem;
  grid-template-columns:minmax(0,1.4fr) minmax(9rem,1fr) minmax(8rem,.8fr);
  grid-template-rows:auto repeat(5,minmax(2.6rem,auto))}
.mh{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding-bottom:.4rem;align-self:end}
.mh-a{grid-area:1/1}.mh-b{grid-area:1/2}.mh-c{grid-area:1/3}

.lyr{grid-column:1;font-family:var(--mono);font-size:.84rem;color:var(--soft);
  display:flex;align-items:center;position:relative;padding-left:1.5rem}
.lyr::before{content:"";position:absolute;left:0;top:50%;width:.44rem;height:.44rem;margin-top:-.22rem;
  border-radius:50%;background:var(--rule-2)}
/* the two ends of the span are the claim; the layers between are the journey */
.lyr.l1,.lyr.l5{color:var(--ink)}
.lyr.l1::before,.lyr.l5::before{background:var(--acc)}
.l1{grid-row:2}.l2{grid-row:3}.l3{grid-row:4}.l4{grid-row:5}.l5{grid-row:6}

.span{grid-column:2;border:1px solid var(--rule-2);border-radius:6px;background:var(--bg);
  font-family:var(--mono);font-size:.76rem;color:var(--faint);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:.4rem .6rem}
.sp1{grid-row:2}.sp2{grid-row:3}.sp3{grid-row:4}.sp4{grid-row:5}.sp5{grid-row:6}
/* tiles link into the matching section of "What I work with"; the global link
   style (accent colour + underline) would shout here, so the affordance is the
   border lighting up on hover and focus instead */
a.span{text-decoration:none;color:var(--faint);transition:border-color .15s,color .15s}
a.span:hover{border-color:var(--acc);color:var(--ink)}
a.span:focus-visible{border-color:var(--acc);color:var(--ink)}
/* jumping to a stack group should not park it flush against the top edge */
.stack-group[id]{scroll-margin-top:2rem}

.whole{grid-column:3;grid-row:2/7;border:1px solid var(--acc);border-radius:6px;
  background:rgba(94,230,168,.06);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:.6rem}
.whole span{font-family:var(--mono);font-size:.78rem;color:var(--acc);line-height:1.5}

/* Narrow screens cannot hold three columns without the words colliding. The
   middle column is the one that goes: the paragraphs below say the same thing
   in words, and the claim itself survives as the bar under the layers. */
@media (max-width:52rem){
  .split-map{grid-template-columns:1fr;grid-template-rows:auto repeat(5,minmax(2.2rem,auto)) auto}
  .mh-b,.mh-c,.span{display:none}
  .whole{grid-column:1;grid-row:7;margin-top:1rem;padding:.8rem}
}

/* portrait */
/* The photograph as shot, in a rounded rectangle. The corners are CSS rather
   than transparency, so the file stays an ordinary opaque image and the radius
   is one number to change. */
.portrait{max-width:20rem;width:100%;border-radius:16px;
  box-shadow:0 16px 34px rgba(0,0,0,.5)}
.about-top{display:grid;grid-template-columns:1fr minmax(0,20rem);gap:3rem;align-items:start}

/* fact strip */
.facts{background:var(--panel);border-top:1px solid var(--rule)}
.facts .wrap{padding-top:3rem;padding-bottom:3rem}
dl.spec{margin:0;display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;max-width:52rem;font-size:.9rem}
dl.spec dt{color:var(--faint);padding:.6rem 1.5rem .6rem 0;border-top:1px solid var(--rule-2)}
dl.spec dd{margin:0;padding:.6rem 0;border-top:1px solid var(--rule-2);font-family:var(--mono);
  font-size:.86rem;color:var(--ink);word-break:break-word}
dl.spec dt:first-of-type,dl.spec dt:first-of-type + dd{border-top:0}

/* ---------------- form ---------------- */

form.enquiry{max-width:38rem;margin:0}
.field{margin-bottom:1.35rem}
.field label{display:block;font-size:.85rem;font-weight:500;color:var(--ink);margin-bottom:.45rem}
.field label .opt{color:var(--faint);font-weight:400}
.field input,.field textarea{
  width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--rule-2);
  border-radius:3px;padding:.7rem .85rem;font:inherit;font-size:1rem;line-height:1.5}
.field textarea{min-height:9rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:hover,.field textarea:hover{border-color:#313D44}
.field .hint{font-size:.8rem;color:var(--faint);margin:.4rem 0 0;max-width:none}
.field .err{font-size:.82rem;color:var(--warn);margin:.4rem 0 0;max-width:none;display:none}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--warn)}
.field[data-invalid] .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.go{font-family:inherit;cursor:pointer}
button.go[disabled]{opacity:.55;cursor:progress}
.formnote{font-size:.86rem;color:var(--faint);max-width:38rem;margin:1.1rem 0 0}
.result{margin:1.25rem 0 0;padding:.95rem 1.1rem;border-radius:3px;font-size:.93rem;max-width:38rem}
.result.ok{background:rgba(94,230,168,.09);border:1px solid rgba(94,230,168,.4);color:var(--ink)}
.result.bad{background:rgba(232,179,94,.08);border:1px solid rgba(232,179,94,.4);color:var(--ink)}

.contact-cols{display:grid;grid-template-columns:1fr minmax(0,20rem);gap:3rem}
.direct dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.3rem}
.direct dd{margin:0 0 1.3rem;font-size:.95rem}
.direct dd a{border-bottom-color:rgba(94,230,168,.3)}

/* ---------------- prose (legal pages) ---------------- */

.prose{max-width:44rem}
.prose h2{font-size:1.2rem;margin:2.6rem 0 .85rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--soft);font-size:.96rem;max-width:none}
.prose ul{color:var(--soft);font-size:.96rem;padding-left:1.15rem}
.prose li{margin-bottom:.4rem}
.prose strong{color:var(--ink);font-weight:600}
.updated{font-family:var(--mono);font-size:.8rem;color:var(--faint);margin:0 0 2.5rem}

/* ---------------- footer ---------------- */

footer{border-top:1px solid var(--rule);background:var(--panel)}
footer .wrap{padding-top:2.5rem;padding-bottom:3rem}
footer .legal{font-family:var(--mono);font-size:.78rem;color:var(--soft);max-width:54rem;margin:0 0 1rem;line-height:1.7}
footer nav{margin:0 0 1rem}
footer nav a{color:var(--soft);border-bottom-color:var(--rule-2);font-size:.86rem;position:relative}
footer nav a::after{content:"";position:absolute;inset:-4px -3px}
footer nav a:hover{color:var(--ink)}
footer .copy{font-family:var(--mono);font-size:.78rem;color:var(--faint);margin:0}

/* ---------------- responsive ---------------- */

@media (max-width:52rem){
  .about-top,.contact-cols{grid-template-columns:1fr;gap:2.25rem}
  .portrait{max-width:16rem}
}
@media (max-width:34rem){
  :root{--pad:1.25rem}
  .hero{padding:2.75rem 0 2.5rem}
  section > .wrap{padding-top:2.5rem;padding-bottom:2.5rem}
  .bar nav ul{gap:1.1rem;font-size:.84rem}
  .job,.stack-group{grid-template-columns:1fr;gap:.35rem}
  dl.spec{grid-template-columns:1fr}
  dl.spec dt{padding:.55rem 0 .05rem;border-top:1px solid var(--rule-2)}
  dl.spec dd{padding:0 0 .55rem;border-top:0}
  dl.spec dt:first-of-type + dd{border-top:0}
  .markers{gap:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media print{
  body{background:#fff;color:#000}
  .bar nav,.go,form.enquiry{display:none}
}

/* ---------------- spacing utilities ----------------
   ponytail: these exist so no element needs a style="" attribute — that lets the
   CSP stay at style-src 'self' with no 'unsafe-inline'. */
.mt-s{margin-top:1.5rem}
.mt-m{margin-top:1.75rem}
.mt-l{margin-top:2rem}
.mt-xl{margin-top:2.25rem}
.mb-xl{margin-bottom:2.5rem}
.fs-s{font-size:.9rem}
.dl-list{margin:1.75rem 0 0}
.nowrap{white-space:nowrap}

/* ---------------- avatar / split blocks ---------------- */

.hero-split{display:grid;grid-template-columns:1fr minmax(0,19rem);gap:1rem 3.5rem;align-items:center}
.ai-split{display:grid;grid-template-columns:1fr minmax(0,17rem);gap:1rem 3rem;align-items:start}

.hero-figure,.ai-figure{margin:0}
.hero-figure img,.ai-figure img{
  width:100%;border-radius:50%;
  /* the source is a dark square; the round mask drops its corners and leaves the ring */
  box-shadow:0 0 0 1px var(--rule-2), 0 0 70px -14px rgba(96,170,255,.30)}
.ai-figure figcaption{font-size:.82rem;line-height:1.5;color:var(--faint);margin-top:1rem;text-align:center}

@media (max-width:52rem){
  .hero-split,.ai-split{grid-template-columns:1fr;gap:2.5rem}
  .hero-figure img,.ai-figure img{max-width:15rem}
  .ai-figure figcaption{text-align:left;max-width:15rem}
}

/* ---------------- Georgian originals in the legal block ---------------- */

.ka{display:block;margin-top:.25rem;color:var(--faint);font-size:.85rem;line-height:1.5;
  font-family:'Noto Sans Georgian',var(--mono)}
dl.spec dd .ka{font-size:.82rem}
.legal-note{font-size:.85rem;color:var(--faint);max-width:44rem;margin:1.5rem 0 0}