:root {
  --bg: #fff;
  --ink: #000;
  --T: 2.6s;
  --c: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-i18n], [data-art] { display: block; position: relative; }

/* ------------------------------------------------------------------ pixels */
.pl { position: relative; display: block; }
.pl.box { position: absolute; top: 0; left: 0; pointer-events: none; }
/* Pixels start hidden. The rAF timeline in pixel.js adds .on to reveal them line by line;
   a finished unit gets .rev and shows everything at once. No per-pixel animations. */
.pl i { position: absolute; width: var(--p); height: var(--p); background: var(--c); visibility: hidden; }
.rev .pl i, .pl i.on, .typed .pl i { visibility: visible; }
.pl.gone i, .star.gone { visibility: hidden !important; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes twinkle { 50% { opacity: 0; } }

/* stars */
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.star { position: absolute; width: 4px; height: 4px; background: var(--ink); visibility: hidden; }
.star.big { width: 12px; height: 12px; clip-path: polygon(33% 0, 66% 0, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0 66%, 0 33%, 33% 33%); }
.star.on { visibility: visible; }
.rev .star { visibility: visible; animation: twinkle var(--tw, 3s) steps(1) infinite; }

.dither { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; pointer-events: none; }

/* the beam that draws the page, line by line */
.head {
  position: fixed; inset-inline: 0; top: 0; height: 4px; z-index: 50;
  pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(to right, #000 0 8px, transparent 8px 12px);
}
.head::before {
  content: ""; position: absolute; top: -4px; inset-inline-start: 0;
  width: 12px; height: 12px; background: #000; box-shadow: 4px 4px 0 #888;
}
.head.go { animation: beam var(--T) linear both; }
@keyframes beam {
  0%   { opacity: 1; transform: translateY(0); }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--H, 100vh)); }
}

/* ------------------------------------------------------------------ navbar */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.nav-in {
  display: flex; align-items: center; gap: 28px;
  max-width: 1240px; margin: 0 auto; padding: 18px 40px 20px;
}
.logo { display: flex; align-items: center; gap: 14px; }
.links { display: flex; gap: 38px; margin-inline-start: auto; margin-inline-end: 12px; }
.links a { display: block; padding: 6px 0; transition: transform .1s steps(2); }
.links a:focus-visible { transform: translateY(-4px); outline: none; }
@media (hover: hover) { .links a:hover { transform: translateY(-4px); } }
.hline { position: relative; height: 3px; }

/* ----------------------------------------------------------------- buttons */
.btn, .badge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.btn { padding: 14px 32px; background: none; border: 0; cursor: pointer; transition: transform .1s steps(2); }
.btn.sm { padding: 10px 22px; }
.btn > [data-i18n], .badge > [data-i18n], .badge > [data-art] { position: relative; }
.btn.primary > [data-i18n] { --c: var(--bg); }
.btn:focus-visible { transform: translate(-4px, -4px); outline: none; }
@media (hover: hover) { .btn:hover { transform: translate(-4px, -4px); } }
.btn:active { transform: translate(4px, 4px); }
.badge { padding: 8px 20px; gap: 12px; margin-bottom: 30px; }
.dot { animation: blink 1.2s steps(1) infinite; }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 86px);
  min-height: calc(100svh - 86px);
  display: flex; align-items: center;
}
.hero-in {
  position: relative; z-index: 1; width: 100%;
  max-width: 1240px; margin: 0 auto; padding: 56px 40px 110px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.copy h1 { width: 100%; margin: 0 0 24px; font-size: 0; }
.tagrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.caret { position: relative; display: block; width: 16px; height: 34px; }
.hero.rev .caret { animation: blink 1s steps(1) infinite; }
.lead { width: 100%; max-width: 560px; margin: 0 0 40px; }
.cta { display: flex; flex-wrap: wrap; gap: 28px; }

.visual { position: relative; display: grid; place-items: center; min-height: 420px; }
.card { width: 100%; max-width: 504px; background: var(--bg); }
.chip { position: absolute; background: var(--bg); }
.c1 { top: 2%; inset-inline-end: 0; }
.c2 { bottom: 2%; inset-inline-start: 0; }
.bob { animation: bob 4s steps(4) infinite; }
.b2 { animation-delay: -1.2s; }
.b3 { animation-delay: -2.4s; }

/* ------------------------------------------------------------------- about */
.about { position: relative; padding: 110px 0 140px; scroll-margin-top: 60px; }
.about-in {
  max-width: 1240px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center;
}
.about-visual { position: relative; display: grid; place-items: center; }
.pframe { position: relative; width: 100%; max-width: 384px; }
.portrait { width: 100%; background: var(--bg); }
.sticker { position: absolute; top: -84px; inset-inline-end: 8px; background: var(--bg); }
.about-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.about-copy h2 { width: 100%; margin: 0 0 26px; font-size: 0; }
.about-p { width: 100%; max-width: 600px; margin: 0 0 18px; }
.stats { display: flex; flex-wrap: wrap; gap: 22px; margin: 30px 0 34px; }
.stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 20px; }
.stat > [data-i18n] { position: relative; }
.skills { display: flex; flex-wrap: wrap; gap: 18px; }
.skill { position: relative; display: inline-flex; padding: 8px 16px; }
.skill > [data-i18n] { position: relative; }

/* ------------------------------------------------ black sections + shared layout */
.dark { --bg: #000; --ink: #fff; --c: #fff; background: var(--bg); color: var(--ink); }
.sec { position: relative; padding: 110px 0 150px; scroll-margin-top: 60px; }
.sec-in { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.sec-in.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
.sec-head, .sec-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.story .sec-head { margin-bottom: 30px; }
.sec-head h2, .sec-copy h2 { width: 100%; margin: 0 0 26px; font-size: 0; }
.sec-copy h3 { width: 100%; margin: 0 0 18px; }
.sec-head > p, .sec-copy > p { width: 100%; max-width: 600px; margin: 0 0 22px; }
.sec-visual { position: relative; display: grid; place-items: center; }
.artwin { width: 100%; max-width: 448px; background: var(--bg); }

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.svc { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px 26px 32px; min-width: 0; }
.svc h3, .svc p { margin: 0; width: 100%; }

.mz-list { list-style: none; margin: 6px 0 34px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mz-item { display: flex; align-items: center; gap: 14px; }

.kn-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 30px 32px; min-width: 0; }
.kn-row, .ct-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ct-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
[dir="rtl"] .kn-row > [data-art] { transform: scaleX(-1); }

.fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.fb { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 28px 28px 30px; min-width: 0; }
.fb p { margin: 0; width: 100%; }
.fb-who { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: auto; }

.foot { position: relative; padding: 38px 0; }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sec { padding: 72px 0 120px; }
  .sec-in { padding: 0 24px; }
  .sec-in.split { grid-template-columns: 1fr; gap: 56px; }
  .svc-grid, .fb-grid { grid-template-columns: 1fr; }
  .foot-in { padding: 0 24px; }
}
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 36px; padding: 32px 24px 120px; }
  .visual { min-height: 0; }
  .c1 { top: -22px; } .c2 { bottom: -22px; }
  .nav-in { padding: 14px 24px; }
  .about { padding: 72px 0 110px; }
  .about-in { grid-template-columns: 1fr; gap: 56px; padding: 0 24px; }
  .stage { margin-inline: auto; }
}
.menu { display: none; }
.menu > .ic { grid-area: 1 / 1; display: block; }
.ic-x { opacity: 0; }
.mz-item > [data-i18n] { flex: 1; min-width: 0; }
.mz-item > [data-art] { flex: none; }
.mz-list { align-self: stretch; }

/* ---------------------------------------- tablets and phones: the links become a menu */
@media (max-width: 1140px) {
  .nav-in { gap: 10px; padding: 12px 18px; }
  .btn.sm { margin-inline-start: auto; padding: 8px 16px; }
  .btn.sm.menu { display: inline-grid; margin-inline-start: 0; padding: 10px 12px; }
  .nav.open .ic-b { opacity: 0; }
  .nav.open .ic-x { opacity: 1; }

  /* the links become a drop-down panel (its pixel frame is drawn when it opens) */
  .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; gap: 4px; margin: 0; padding: 14px 26px 26px; background: var(--bg);
  }
  .nav.open .links { display: flex; }
  .links a { padding: 12px 0; }
}

/* ------------------------------------------------------------------- phones */
@media (max-width: 720px) {

  .tlab { display: none; }
  .track { --pt: 40px; margin-top: 36px; }
  .story-ctl { gap: 16px; }

  /* hide the decoration, keep the message */
  .visual, .sticker, .ct-list { display: none !important; }
  .about-p + .about-p { display: none; }
  .fb:nth-child(3) { display: none; }

  .hero { min-height: 0; }
  .hero-in { padding: 24px 20px 96px; gap: 0; }
  .badge { margin-bottom: 22px; padding: 7px 14px; gap: 10px; }
  .copy h1 { margin-bottom: 16px; }
  .tagrow { margin-bottom: 16px; }
  .lead { margin-bottom: 28px; }
  .cta { gap: 20px; }
  .dither { height: 56px; }

  .sec { padding: 56px 0 96px; min-height: 0; }
  .about { padding: 56px 0 96px; min-height: 0; }
  .sec-in, .about-in { padding: 0 20px; }
  .sec-head { margin-bottom: 32px; }
  .about-in { gap: 40px; }
  .sec-in.split { gap: 40px; }
  .svc-grid, .fb-grid { gap: 26px; }
  .svc { padding: 22px 20px 26px; }
  .fb { padding: 22px 20px 24px; }
  .stats { gap: 16px; margin: 22px 0 26px; }
  .stat { padding: 10px 14px; }
  .skills { gap: 12px; }
  .kn-card { padding: 22px 20px; gap: 18px; }
  .kn-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kn-row > [data-i18n] { flex: none; width: 100%; }
  .cform { gap: 20px; }
  .fbar { gap: 16px; }
  .foot { padding: 28px 0; }
  .foot-in { padding: 0 20px; gap: 18px; }
}
@media (max-width: 380px) { .nav-in .logo [data-i18n] { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pl i, .star, .bob, .dot, .caret { animation: none !important; }
  .head { display: none; }
}

.kn-row > [data-i18n] { flex: 1; min-width: 0; }

/* --------------------------------------------------------------- my story */
/* One big pixel "screen". Scenes cross-fade with a column wipe driven from main.js. */
.stage { --u: 8px; }   /* main.js overrides this inline, in whole pixels */
.stage {
  position: relative; margin: 0 auto 44px;
  width: calc(var(--u) * 128); height: calc(var(--u) * 72);
  background: var(--bg);
}
.jscene { position: absolute; inset: 0; }
.jscene > [data-art] { position: absolute; left: 0; top: 0; }
.jscene:not(.on):not(.leaving) .pl i { visibility: hidden !important; }
.pl i.gone { visibility: hidden !important; }
.jscene > .fra, .walker .fra { animation: fra 1s steps(1) infinite; }
.jscene > .frb, .walker .frb { animation: frb 1s steps(1) infinite; }
.walker .fra, .walker .frb { animation-duration: .42s; }
@keyframes fra { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes frb { 0% { opacity: 0; } 50% { opacity: 1; } }

/* the scan line that sweeps across while one scene turns into the next */
.beam {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--u); opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 4));
}
[dir="rtl"] .beam { left: auto; right: 0; }
.stage.sweeping .beam { animation: beamx .62s linear; }
[dir="rtl"] .stage.sweeping .beam { animation-name: beamxr; }
@keyframes beamx { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--u) * 128)); } }
@keyframes beamxr { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--u) * -128)); } }

.story-bar { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.story-info { display: grid; min-width: 0; }
.sinfo {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s steps(3), transform .3s steps(3);
}
.sinfo.on { opacity: 1; transform: none; pointer-events: auto; }
.sinfo h3, .sinfo p { margin: 0; width: 100%; }
.story-ctl { display: flex; gap: 20px; }

.track { --pt: 54px; position: relative; display: flex; justify-content: space-between; margin-top: 52px; padding-top: var(--pt); }
.tnode { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 4px; background: none; border: 0; cursor: pointer; }
.tdot { position: relative; display: grid; background: var(--bg); }
.tdot > * { grid-area: 1 / 1; }
.ton { opacity: 0; }
.tnode.on .ton { opacity: 1; }
.tnode:focus-visible { outline: none; }
.tnode:focus-visible .tdot { transform: translateY(-4px); }
.tlab { position: relative; }
.tline { position: absolute; left: 0; right: 0; top: calc(var(--pt) + 11px); height: 3px; }
.walker { position: absolute; top: 0; left: 0; width: 36px; height: calc(var(--pt) + 2px); pointer-events: none; transition: left .65s steps(8); }
.wset { position: absolute; left: 0; bottom: 0; opacity: 0; }
.wset > [data-art] { position: absolute; left: 0; bottom: 0; }
.walker[data-w="0"] .w0, .walker[data-w="1"] .w1, .walker[data-w="2"] .w2 { opacity: 1; }

/* ---- speed: sections that have been drawn are skipped by the browser while off-screen,
        and unbuilt sections reserve space so the page does not jump when they are built */
.cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.sec { min-height: 760px; }
.about { min-height: 900px; }
.foot { min-height: 110px; }

/* ---- contact form: real inputs stay invisible on top; everything you see is drawn in pixels */
.cform { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.frow { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.flabel { display: block; position: relative; }
.field { position: relative; padding: 14px 22px; transition: transform .1s steps(2); }
.fbody { position: relative; height: 40px; overflow: hidden; }
.fbody.ta { height: 168px; }
.fph, .fval { position: absolute; left: 0; right: 0; top: 0; }
.fval { will-change: transform; }
.field:not(.empty) .fph { display: none; }
.fin {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; opacity: 0; resize: none; background: none; font-size: 16px; cursor: text;
}
.pcur { position: absolute; top: 0; width: 6px; height: 30px; opacity: 0; pointer-events: none; --bc: var(--c); }
.field:focus-within .pcur { opacity: 1; animation: blink 1s steps(1) infinite; }
.field:focus-within, .field.bad:not(:focus-within) { transform: translate(-3px, -3px); }
.field .box.hl i { visibility: hidden !important; }
.field:focus-within > .box.hl i, .field.bad > .box.hl i { visibility: visible !important; }
.field:focus-within > .box:not(.hl) i, .field.bad > .box:not(.hl) i { visibility: hidden !important; }
.field.bad { animation: shake .3s steps(3); }
@keyframes shake { 25% { transform: translate(-9px, -3px); } 75% { transform: translate(3px, -3px); } }
.fbar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fstatus { position: relative; margin: 0; min-height: 30px; }
.ct-list { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }

/* ---- story on smaller screens (kept last so it wins over the rules above) */
@media (max-width: 900px) {
  .stage { margin-bottom: 32px; }
  .story-bar { grid-template-columns: 1fr; gap: 24px; }
  .track { --pt: 44px; margin-top: 40px; }
}
@media (max-width: 720px) {
  /* let the stage run past the section padding so it is as wide as the phone allows */
  .stage { margin-left: 50%; transform: translateX(-50%); }
  .tlab { display: none; }
  .story-ctl { gap: 14px; }
  .track { --pt: 38px; margin-top: 30px; }
  .walker { width: 24px; }
}