@font-face {
  font-family:Manrope;
  src:url('assets/manrope-200.ttf') format('truetype');
  font-weight:200;
  font-display:swap;
}
@font-face {
  font-family:Manrope;
  src:url('assets/manrope-400.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Manrope;
  src:url('assets/manrope-600.ttf') format('truetype');
  font-weight:600;
  font-display:swap;
}
:root {
  --ink:#070707;
  --menu-height:70px;
  --column:894.904724px;
  --line:rgba(0,0,0,.1);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Manrope,sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:27px;
  position:relative;
}
h1,h2,h3,p,ul {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}
a:focus-visible {
  outline:2px solid #729400;
  outline-offset:5px;
}
img {
  display:block;
}
h2 {
  font-size:40px;
  font-weight:400;
  line-height:55px;
  text-align:center;
  width:578px;
  max-width:100%;
}
.menu {
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translateY(0);
  transition:transform 550ms cubic-bezier(.4,0,.2,1);
}
.menu.is-hidden {
  transform:translateY(-100%);
  pointer-events:none;
}
.menu:has(a:focus-visible) {
  transform:translateY(0);
  pointer-events:auto;
}
:where(main section[id], footer[id]) {
  scroll-margin-top:var(--menu-height);
}
.menu nav {
  width:418px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:27px;
}
.menu a {
  font-weight:400;
  color:#000;
  opacity:1;
}
.menu .about-link {
  padding-left:10px;
}
.hero {
  height:800px;
  padding:50px 200px 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
}
.hero-content {
  width:843px;
  height:613px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}
.hero-intro {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}
.portrait {
  width:293px;
  height:293px;
  border-radius:150px;
}
.hero-text {
  width:100%;
  height:155px;
  text-align:center;
  position:relative;
  left:.5px;
}
.hero-text h1 {
  font-size:70px;
  line-height:96px;
  font-weight:400;
}
.hero-text p {
  font-size:30px;
  line-height:41px;
  white-space:nowrap;
}
.hero-text p span {
  font-weight:400;
}
.down,.down img {
  width:50px;
  height:50px;
}
.down img {
  transform:rotate(180deg);
}
.section {
  padding:100px 33px;
  display:flex;
  align-items:center;
  flex-direction:column;
}
.container {
  width:var(--column);
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.section-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
  text-align:center;
}
.projects .container,.about .container {
  gap:55px;
}
.projects-description {
  width:682px;
  max-width:100%;
}
.cards {
  width:100%;
  display:flex;
  gap:20px;
}
.card {
  position:relative;
  flex:1;
  min-width:0;
  height:242px;
}
.card-surface {
  position:absolute;
  inset:0;
  border-radius:14px;
  outline:1px solid var(--line);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  background:white;
}
.sber .card-surface {
  outline-color:#bdef10;
}
.card-background {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
}
.card-background img {
  position:absolute;
  width:138.64467%;
  height:108.84024%;
  left:-29.21341%;
  top:-4.43156%;
}
.card-heading,.tags {
  position:relative;
}
.card-heading {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card h3 {
  font-size:20px;
  line-height:27px;
  font-weight:400;
}
.date {
  font-size:14px;
  line-height:19px;
  opacity:.5;
  white-space:nowrap;
}
.tags {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tag-row {
  display:flex;
  gap:4px;
}
.tag {
  font-size:14px;
  line-height:19px;
  border-radius:18px;
  background:#f6f6f6;
  padding:4px 10px;
  white-space:nowrap;
}
.sber .tag {
  background:rgba(0,0,0,.08);
}
@media(hover:hover) and (pointer:fine) {
  .card:hover .card-surface {
    z-index:1;
    inset:auto;
    left:-9px;
    top:-8px;
    width:302.63156px;
    height:257px;
    border-radius:14.86777px;
    padding:25.4876px 21.23967px;
  }
  .card:hover h3 {
    font-size:21px;
    line-height:29px;
  }
  .card:hover .date,.card:hover .tag {
    font-size:15px;
    line-height:20px;
  }
  .card:hover .tag {
    padding:4.24793px 10.61983px;
  }
  .card:hover .tag-row,.card:hover .tags {
    gap:4.24793px;
  }
  .card:hover .card-heading {
    gap:10.61983px;
  }
  .sber:hover .card-surface {
    left:-9.96823px;
    width:303px;
    height:257.31287px;
    border-radius:14.88587px;
    padding:25.51863px 21.26553px;
  }
}
.about {
  padding-top:120px;
}
.about-intro {
  position:relative;
}
.biography {
  width:696px;
  max-width:100%;
  position:relative;
}
.biography p+p {
  margin-top:27px;
}
.biography mark {
  background:none;
  color:inherit;
}
.about-intro:before {
  content:'';
  position:absolute;
  width:410px;
  height:20px;
  left:308.45236px;
  top:162px;
  border-radius:21px;
  background:#e1fe7d;
}
.records {
  width:100%;
}
.record {
  padding:20px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px;
}
.record:last-child {
  border-bottom:0;
}
.record-copy {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.record h3 {
  font-size:24px;
  font-weight:400;
  line-height:33px;
}
.experience h3 {
  font-weight:400;
}
.record p a {
  text-decoration:none;
  text-underline-position:from-font;
}
.year {
  flex-shrink:0;
}
.tools .container,.education .container {
  gap:40px;
}
.tool-list {
  display:flex;
  gap:20px;
}
.tool {
  height:100px;
  width:100px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fafafa;
  border:1px solid rgba(0,0,0,.05);
  padding:12.26667px;
  border-radius:23px;
}
.tool-image {
  width:100%;
  aspect-ratio:424/427;
  overflow:hidden;
  position:relative;
  border-radius:23px;
}
.tool-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.figma img {
  position:absolute;
  width:283.02%;
  height:147.54%;
  left:-91.51%;
  top:-23.65%;
}
.recraft img {
  position:absolute;
  width:183.51%;
  height:109.33%;
  left:-41.55%;
  top:-4.76%;
}
.education h2 {
  width:804px;
}
.contacts {
  padding-bottom:150px;
  gap:40px;
}
.contact-links {
  display:flex;
  gap:100px;
  justify-content:center;
  font-weight:400;
  color:#010101;
}
.decorative-cursor {
  position:absolute;
  left:min(calc(50% + 362px), calc(100% - 245px));
  top:1308px;
  width:245px;
  height:245px;
  pointer-events:none;
}
@media(max-width:1000px) {
  .hero {
    padding-left:24px;
    padding-right:24px;
  }
  .hero-content {
    max-width:100%;
  }
  .contact-links {
    gap:35px;
  }
  .decorative-cursor {
    left:auto;
    right:0;
  }
  .about-intro:before {
    left:calc(50% - 139px);
  }
}
@media(max-width:740px) {
  .menu.is-hidden {
  transform:translateY(-100%);
  pointer-events:none;
}
.menu:has(a:focus-visible) {
  transform:translateY(0);
  pointer-events:auto;
}
:where(main section[id], footer[id]) {
  scroll-margin-top:var(--menu-height);
}
.menu nav {
    width:min(418px,calc(100% - 40px));
    font-size:16px;
  }
  .hero {
    height:720px;
  }
  .hero-content {
    height:560px;
  }
  .hero-text h1 {
    font-size:clamp(32px,7vw,52px);
    line-height:1.4;
  }
  .hero-text p {
    font-size:clamp(13px,3vw,22px);
    line-height:1.4;
  }
  .section {
    padding:70px 24px;
  }
  .cards {
    flex-direction:column;
    gap:20px;
  }
  .card {
    flex:auto;
    width:100%;
  }
  .card-surface {
    position:relative;
    height:242px;
  }
  .decorative-cursor {
    display:none;
  }
  h2 {
    font-size:32px;
    line-height:44px;
  }
  .section-intro {
    gap:20px;
  }
  .biography br {
    display:none;
  }
  .biography {
    font-size:18px;
    line-height:27px;
  }
  .about-intro:before {
    display:none;
  }
  .biography mark {
    background:#e1fe7d;
    border-radius:8px;
  }
  .record h3 {
    font-size:20px;
    line-height:29px;
  }
  .record p,.year {
    font-size:16px;
    line-height:24px;
  }
  .record-copy {
    gap:10px;
  }
  .record h3 br {
    display:none;
  }
  .tool-list {
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .tool {
    width:64px;
    height:64px;
    padding:8px;
    border-radius:16px;
  }
  .tool-image {
    border-radius:15px;
  }
  .contact-links {
    flex-direction:column;
    gap:20px;
    align-items:center;
    font-size:18px;
  }
  .contacts {
    padding-bottom:80px;
  }
  @media (hover:hover) and (pointer:fine) {
  .card:hover .card-surface {
    left:0;
    top:0;
    width:100%;
    height:242px;
    padding:24px 20px;
  }
  }
}
@media(prefers-reduced-motion:reduce) {
  .menu {
    transition:none;
  }
  html {
    scroll-behavior:auto;
  }
}
/* Figma text boxes round natural text widths to whole pixels. */
.hero-text h1 {
  width:578px;
  max-width:100%;
  margin-inline:auto;
}
@media(min-width:1001px) {
  .contact-links {
    width:917px;
  }
  .contact-links a:nth-child(1) {
    width:135px;
  }
  .contact-links a:nth-child(2) {
    width:235px;
  }
  .contact-links a:nth-child(3) {
    width:175px;
  }
  .contact-links a:nth-child(4) {
    width:72px;
  }
}
@media(min-width:741px) {
  .shanti .tag-row:first-child .tag:first-child,.sber .tag-row:first-child .tag:first-child {
    width:47px;
  }
  .tag-row .tag:nth-child(2) {
    width:103px;
  }
  .shanti .tag-row:last-child .tag {
    width:67px;
  }
  .sber .tag-row:first-child .tag:last-child {
    width:68px;
  }
  .sber .tag-row:last-child .tag {
    width:97px;
  }
  .ctv .tag-row:first-child .tag:first-child {
    width:46px;
  }
  .ctv .tag-row:last-child .tag {
    width:71px;
  }
  .tag {
    text-align:center;
  }
}
@media(hover:hover) and (pointer:fine) {
  .card:hover .tag {
    width:auto!important;
  }
}
/* Layer exports preserve Figma's exact image crop and image adjustments. */
.tool-image img {
  position:static;
  width:100%;
  height:100%;
  object-fit:fill;
}
@media(min-width:741px) and (max-width:960px) {
  .cards {
    flex-direction:column;
  }
  .card {
    flex:auto;
    width:100%;
  }
  @media (hover:hover) and (pointer:fine) {
  .card:hover .card-surface {
    left:0;
    top:0;
    width:100%;
  }
  }
}

/* Shared case-page return control; add <case-back> on case pages only. */
case-back {
  position:fixed;
  z-index:90;
  left:50px;
  bottom:29px;
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 550ms cubic-bezier(.4,0,.2,1), visibility 0s linear 550ms;
}
case-back.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
case-back a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:10px 16px;
  border-radius:32px;
  background:rgba(244,244,244,.52);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#191919;
  font-size:16px;
  line-height:22px;
  font-weight:inherit;
}
case-back img { width:22px; height:22px; }
@media(max-width:740px) {
  case-back { left:24px; }
}
@media(prefers-reduced-motion:reduce) {
  case-back { transition:none; }
}

/* Shared desktop cursor. The clipped text copy never affects page layout. */
.site-cursor {
  position:fixed;
  z-index:2147483647;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#000;
  color:#fff;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint;
  transform:translate(-50%, -50%);
  transition:width 200ms ease-in-out, height 200ms ease-in-out, background-color 200ms ease-in-out, color 200ms ease-in-out;
}
.site-cursor[hidden] { display:none; }
.site-cursor *, .site-cursor *::before, .site-cursor *::after { pointer-events:none !important; }
.site-cursor *::before, .site-cursor *::after { visibility:hidden !important; }
@media(hover:hover) and (pointer:fine) {
  html.has-site-cursor, html.has-site-cursor * { cursor:none !important; }
}
@media(hover:none), (pointer:coarse) {
  .site-cursor { display:none !important; }
}

@media(prefers-reduced-motion:reduce) {
  .site-cursor { transition:none; }
}

/* Content cards only: audience groups and evolution steps. */
.content-card {
  height:auto;
  min-height:0;
  min-width:0;
  padding:40px 30px;
  border-radius:16px;
  background:#fafafa;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:background-color 240ms ease-in-out;
}
.content-card--icon { gap:50px; }
.content-card--stack { gap:30px; }
@media(max-width:740px) {
  .content-card--stack { gap:24px; }
}
.content-card > * { flex:0 0 auto; min-width:0; max-width:100%; }
.content-card p { overflow-wrap:anywhere; }
@media(hover:hover) and (pointer:fine) {
  .content-card:hover { background-color:#f5f5f5; }
}
case-back a { box-shadow:0 4px 24px rgba(0,0,0,.055); }
@media(prefers-reduced-motion:reduce) {
  .content-card { transition:none; }
}

@media(max-width:1000px) {
  .contact-links { flex-wrap:wrap; justify-content:center; row-gap:20px; }
  .contact-links a { white-space:nowrap; }
}

/* Shared mobile navigation; the existing desktop navigation remains unchanged. */
.mobile-menu-bar, .mobile-menu-overlay { display:none; }
@media (max-width:960px), (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
  .menu { height:auto; display:block; }
  .mobile-menu-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
    min-height:76px;
  }
  .menu-toggle {
    width:44px; height:44px; padding:10px 6px;
    border:0; background:transparent; color:#000;
    display:flex; flex-direction:column; justify-content:center; gap:8px;
  }
  .menu-toggle span { display:block; width:28px; height:2px; background:currentColor; transition:transform 300ms ease-in-out; }
  .menu.is-open .menu-toggle span:first-child { transform:translateY(5px) rotate(45deg); }
  .menu.is-open .menu-toggle span:last-child { transform:translateY(-5px) rotate(-45deg); }
  .menu .menu-write { font-size:16px; line-height:24px; color:#000; opacity:1; background:#F2F2F2; border-radius:24px; padding:10px 20px; }
  .mobile-menu-panel { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 350ms ease-in-out, visibility 350ms; }
  .menu .mobile-menu-panel nav { width:100%; height:auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; gap:0; font-size:24px; }
  .menu .mobile-menu-panel a { flex-shrink:0; padding:20px 24px; line-height:32px; opacity:1; }
  .menu .mobile-menu-panel a:first-child { margin-top:12px; }
  .menu .mobile-menu-panel a:last-child { margin-bottom:36px; }
  .menu.is-open { background:#fff; transform:translateY(0); pointer-events:auto; }
  .menu.is-open .mobile-menu-panel { grid-template-rows:1fr; visibility:visible; }
  .menu.is-open .mobile-menu-panel nav { max-height:calc(100dvh - 124px); overflow-y:auto; overscroll-behavior:contain; }
  .mobile-menu-overlay { display:block; position:fixed; z-index:99; inset:76px 0 0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 350ms ease-in-out, visibility 350ms; }
  .mobile-menu-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .mobile-menu-panel, .mobile-menu-overlay, .menu-toggle span { transition:none; }
}

/* Phone landscape uses the full viewport; portrait retains the content-sized panel. */
@media (max-width:960px) and (orientation:landscape), (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
  .menu.is-open {
    height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .mobile-menu-bar { flex-shrink:0; padding-top:max(14px, env(safe-area-inset-top, 0px)); }
  .menu.is-open .mobile-menu-panel { flex:1; min-height:0; }
  .menu.is-open .mobile-menu-panel nav {
    height:100%; max-height:none;
    justify-content:space-evenly;
    padding:8px max(24px, env(safe-area-inset-right, 0px)) 8px max(24px, env(safe-area-inset-left, 0px));
  }
  .menu .mobile-menu-panel a { padding:4px 24px; }
  .menu .mobile-menu-panel a:first-child { margin-top:0; }
  .menu .mobile-menu-panel a:last-child { margin-bottom:0; }
  .mobile-menu-overlay.is-open { display:none; }
}

.case-portrait-notice { display:none; }
/* Phone-sized touch screens only: landscape and larger tablets keep the case. */
@media (orientation:portrait) and (max-width:600px) and (pointer:coarse),
       (orientation:portrait) and (max-width:600px) and (hover:none) {
  html:has(body[data-portrait-notice]) { overflow:hidden; }
  body[data-portrait-notice] { height:100dvh; overflow:hidden; }
  body[data-portrait-notice] > :not(.menu):not(.case-portrait-notice):not(.mobile-menu-overlay):not(script):not(style) { display:none !important; }
  [data-portrait-notice] .menu { transform:translateY(0); pointer-events:auto; }
  .case-portrait-notice {
    position:fixed; inset:0; height:100dvh;
    display:grid; place-items:center;
    padding:calc(var(--menu-height, 76px) + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(20px, env(safe-area-inset-left, 0px));
    background:#fff; color:#000;
  }
  .case-portrait-message { text-align:center; }
  .case-portrait-message svg { display:block; margin:0 auto 24px; }
  .case-portrait-message h1 { margin:0 0 12px; font-size:22px; line-height:1.35; font-weight:600; }
  .case-portrait-message p { margin:0; font-size:18px; line-height:1.3; color:#939393; }
}

/* Case-link indicator lives inside the shared cursor, never over the preview. */
.site-cursor::after {
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:currentColor;
  -webkit-mask:url('assets/arrow-external.svg') center / contain no-repeat;
  mask:url('assets/arrow-external.svg') center / contain no-repeat;
  opacity:0;
  transition:opacity 200ms ease-in-out;
  pointer-events:none;
}
.site-cursor[data-state="interactive"]::after { opacity:1; }
@media(prefers-reduced-motion:reduce) {
  .site-cursor::after { transition:none; }
}

/* Phone portrait and landscape; tablets retain the shared return control. */
@media (max-width:600px) and (hover:none),
       (max-width:600px) and (pointer:coarse),
       (max-width:1000px) and (max-height:500px) and (hover:none),
       (max-width:1000px) and (max-height:500px) and (pointer:coarse) {
  .case-page case-back { display:none; }
}

/* Allow long copy to fit the smallest layout without changing font sizes. */
@media (max-width:740px) {
  .section h2 { overflow-wrap:anywhere; }
  .hero-text p { white-space:normal; }
}

/* Theme is independent of the interaction state, with explicit nested overrides. */
.site-cursor[data-theme="dark"] { background:#fff; color:#000; }

/* Shared motion: native document scrolling remains separate from touch gestures. */
@keyframes scroll-hint {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(16px); }
}
@keyframes orientation-phone {
  0%, 10%, 77%, 100% { transform:rotate(0deg); }
  32%, 55% { transform:rotate(90deg); }
}
@keyframes orientation-arrows {
  0%, 10%, 77%, 100% { transform:rotate(0deg); }
  32%, 55% { transform:rotate(18deg); }
}
.orientation-phone, .orientation-arrows { transform-box:view-box; transform-origin:32px 32px; }
@media (prefers-reduced-motion:no-preference) {
  .hero .down { animation:scroll-hint 2s ease-in-out infinite; }
  .case-portrait-message .orientation-phone { animation:orientation-phone 4.5s ease-in-out infinite; }
  .case-portrait-message .orientation-arrows { animation:orientation-arrows 4.5s ease-in-out infinite; }
}

/* Keep desktop navigation labels intact within the shared panel. */
.menu nav > a { white-space:nowrap; flex-shrink:0; }

/* Intermediate widths must allow the hero subtitle to wrap. */
@media (min-width:741px) and (max-width:960px) {
  .hero-text p { white-space:normal; }
  .hero-text { height:auto; }
}