/* =====================================================================
   Andrei Kustyshev — Portfolio
   Recreated from Figma. Swiss / International Typographic style.
   Fonts: Alexandria (display + UI), Manrope (long-form body)
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg:        #f8fafb;   /* off-white surface            */
  --ink:       #0b1423;   /* near-black navy (text + dark)*/
  --blue:      #3a7fff;   /* accent blue                  */
  --blue-soft: #72c0ff;   /* hero decoration              */
  --white:     #ffffff;
  --line:      rgba(11,20,35,.16);
  --line-dark: rgba(255,255,255,.18);

  --maxw:       1900px;          /* inner content width         */
  --pad:        clamp(20px, 2vw, 64px);
  --gutter:     clamp(1rem, 2.1vw, 4rem);
  --decor-size: clamp(18rem, 70vh, 50rem);

  --font: "Alexandria", system-ui, sans-serif;

  /* fluid type (caps at 1920px design width) */
  --t-hero:    clamp(9rem, 9.35vw, 11.25rem); /* 180px */
  --t-hero-lg: 7rem;
  --t-hero-md: 5rem;
  --t-hero-sm: 4rem;
  --t-section: clamp(2.5rem,  5vw,    6rem);      /*  96px */
  --t-display: clamp(1.6rem,  2.1vw,  2.5rem);    /*  40px */
  --t-index:   clamp(1rem, 1.5vw,  1.5rem);      /*  32px */
  --t-eyebrow: clamp(1.2rem,  1.5vw,  2rem);      /*  32px */
  --t-coltitle:clamp(1.4rem,  1.5vw,  2rem);   /*  36px */
  --t-ptitle:  clamp(1.6rem,  2.1vw,  2.5rem);    /*  40px */
  --t-body:    clamp(1.05rem, 1vw, 1.375rem);  /*  22px */
  --t-label:   1rem;
  --t-s-label: 1rem;
}
body.theme-dark {
  --bg:        #0b1423;
  --ink:       #f8fafb;
  --white:     #0b1423;
  --line:      rgba(248,250,251,.18);
  --line-dark: rgba(11,20,35,.18);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 1.6s ease, color 1.6s ease;
}
main {
  position: relative;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
h3 {
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1.12;
  margin-bottom: 1rem;
}
h4 {
  font-weight: 600;
  font-size: clamp(1.05rem, 1.2vw, 1.375rem);
  line-height: 1.4;
  margin: 0 0 6px;
}
p, li {
  margin: 0 0 1rem 0;
  font-weight: 300;
  line-height: 1.5;
}

body * {
  transition-property: color, background-color, border-color;
  transition-duration: 1.6s;
  transition-timing-function: ease;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section {
  padding-top: clamp(64px, 8vw, 128px);
  padding-bottom: clamp(64px, 10vw, 180px);
}
.section,
.hero {
  position: relative;
  z-index: 0;
}
.reveal {
  --reveal-y: 22px;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1),
    background-color 1.6s ease,
    border-color 1.6s ease,
    color 1.6s ease;
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s;
  will-change: opacity, transform;
}
.reveal.is-visible {
  --reveal-y: 0px;
  opacity: 1;
  transform: translateY(0);
}
.project.reveal {
  --reveal-y: 34px;
  transition-duration: .82s, .82s, 1.6s, 1.6s, 1.6s;
}
.index.reveal.is-visible,
.index.is-highlighted {
  animation: index-highlight .9s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0s) both;
}
.section--dark { background: var(--ink); color: var(--white); }
.section,
.section--dark,
.logo,
.nav a,
.heading,
.hero__rule,
.hero__rule::before,
.hero__rule::after,
.btn,
.whatido__tagline,
.disc__title,
.disc__stack,
.disc__stack span,
.disc__item h4,
.about__text,
.about__text .bar,
.contacts__list a,
.about__text p,
.about__years,
.about__years span,
.project__title,
.project__role h3,
.project__role p,
.project__media {
  transition:
    background-color 1.6s ease,
    border-color 1.6s ease,
    color 1.6s ease;
}
.row {
  width: calc(100% + var(--gutter));
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
  display: flex;
  flex-wrap: wrap;
}
.row > [class*="col"] {
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  min-width: 0;
}
.col {
  display: block;
  flex: 1 0 0%;
  max-width: 100%;
}
.col-0 { display: none; }
.col-auto,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-fit {
  display: block;
}
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-fit {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.col-xs-0 { display: none; }
.col-xs,
.col-xs-auto,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  display: block;
}
.col-xs { flex: 1 0 0%; max-width: 100%; }
.col-xs-auto { flex: 0 0 auto; width: auto; }
.col-xs-1 { flex: 0 0 auto; width: 8.333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.index {
  font-weight: 600;
  font-size: var(--t-index);
  letter-spacing: .06em;
  color: var(--blue);
  display: block;
}
.heading {
  font-weight: 900;
  font-size: var(--t-section);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.label {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .03em;
  color: var(--blue);
  text-transform: uppercase;
}
.label span {
  color: var(--ink);
}

/* =====================================================================
   Decor
   ===================================================================== */
.decor {
  --decor-scroll: 0;
  --decor-code-opacity: 1;
  --decor-panel-opacity: 1;
  --decor-code-x: 0px;
  --decor-code-y: 0px;
  --decor-back-rest-opacity: .18;
  --decor-back-peak-opacity: .28;
  --decor-block-rest-opacity: .2;
  --decor-block-peak-opacity: .38;
  --decor-block-fall-opacity: .24;
  --decor-panel-x: 0px;
  --decor-panel-y: 0px;
  position: fixed;
  left: 50vw;
  top: 50vh;
  width: var(--decor-size);
  height: var(--decor-size);
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  transform: rotate(45deg) skew(-15deg, -15deg) translate(-47%, 6%);
  animation: decor-perspective-drift 42s ease-in-out infinite;
  transition: opacity .08s linear;
}
body.decor-mode-soft .decor {
  animation-name: decor-perspective-soft-drift;
  animation-duration: 22s;
}
.decor__layout-back {
  width: var(--decor-size);
  height: var(--decor-size);
  background-color: #72C0FF;
  opacity: var(--decor-back-rest-opacity);
  translate: var(--decor-panel-x) var(--decor-panel-y);
  animation: decor-back-float 9s ease-in-out infinite;
  will-change: transform, opacity;
}
.decor__code {
  width: calc(var(--decor-size) - 2rem);
  position: absolute;
  left: 1rem;
  top: calc(var(--decor-size) / 2);
  transform: translateY(-50%);
  color: #d8dde7;
  font-size: clamp(.625rem, 1vw, .875rem);
  line-height: 1.28;
  opacity: var(--decor-code-opacity);
  translate: var(--decor-code-x) var(--decor-code-y);
  user-select: none;
}
body.theme-dark .decor__code {
  color: #334465;
}
.decor__code-track {
  animation: decor-code-scroll 64s linear infinite;
  will-change: transform;
}
.decor__code pre {
  margin: 0;
}
.decor__layout-front {
  width: var(--decor-size);
  height: var(--decor-size);
  position: absolute;
  top: calc(var(--decor-size) / -4);
  left: calc(var(--decor-size) / -10);
  translate: var(--decor-panel-x) var(--decor-panel-y);
}
.decor__layout-block {
  --decor-block-x: 0px;
  --decor-block-y: 0px;
  background-color: #72C0FF;
  opacity: var(--decor-block-rest-opacity);
  position: absolute;
  animation: decor-block-wave 7s ease-in-out infinite;
  will-change: transform, opacity;
}
.layout-block-1 {top: 0; left: 0; width: 100%; height: 10.7%; animation-delay: 0s;}
.layout-block-2 {top: 12.8%; left: 0; width: 50.1%; height: 87.2%; animation-delay: .35s;}
.layout-block-3 {top: 12.8%; left: 52.4%; width: 22.9%; height: 37.1%; animation-delay: .7s;}
.layout-block-4 {top: 52.2%; left: 52.4%; width: 22.9%; height: 39%; animation-delay: 1.05s;}
.layout-block-5 {top: 12.8%; left: 77.5%; width: 22.5%; height: 37.1%; animation-delay: 1.4s;}
.layout-block-6 {top: 52.2%; left: 77.5%; width: 22.5%; height: 25.3%; animation-delay: 1.75s;}
body.theme-dark .decor__layout-back,
body.theme-dark .decor__layout-block {
  opacity: .08;
}

@keyframes decor-code-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-20%); }
}
@keyframes decor-perspective-drift {
  0% {
    transform: rotate(45deg) skew(-15deg, -15deg) translate(-47%, 6%);
  }
  25% {
    transform: rotate(45deg) skew(75deg, -15deg) translate(-47%, 6%);
  }
  50% {
    transform: rotate(45deg) skew(165deg, -15deg) translate(-47%, 6%);
  }
  75% {
    transform: rotate(45deg) skew(255deg, -15deg) translate(-47%, 6%);
  }
  100% {
    transform: rotate(45deg) skew(345deg, -15deg) translate(-47%, 6%);
  }
}
@keyframes decor-perspective-soft-drift {
  0%, 100% {
    transform: rotate(45deg) skew(-15deg, -15deg) translate(-47%, 6%);
  }
  16% {
    transform: rotate(45deg) skew(-13deg, -8deg) translate(-47%, 6%);
  }
  25% {
    transform: rotate(45deg) skew(-17deg, -9deg) translate(-47%, 6%);
  }
  50% {
    transform: rotate(45deg) skew(-12deg, -22deg) translate(-47%, 6%);
  }
  75% {
    transform: rotate(45deg) skew(-18deg, -11deg) translate(-47%, 6%);
  }
  88% {
    transform: rotate(45deg) skew(-14deg, -19deg) translate(-47%, 6%);
  }
}
@keyframes decor-block-wave {
  0%, 100% {
    opacity: var(--decor-block-rest-opacity);
    transform: translate(var(--decor-block-x), var(--decor-block-y));
  }
  18% {
    opacity: var(--decor-block-peak-opacity);
    transform: translate(
      calc(var(--decor-block-x) - 18px),
      calc(var(--decor-block-y) - 18px)
    );
  }
  36% {
    opacity: var(--decor-block-fall-opacity);
    transform: translate(
      calc(var(--decor-block-x) - 6px),
      calc(var(--decor-block-y) - 6px)
    );
  }
}
@keyframes decor-back-float {
  0%, 100% {
    opacity: var(--decor-back-rest-opacity);
    translate: var(--decor-panel-x) var(--decor-panel-y);
  }
  50% {
    opacity: var(--decor-back-peak-opacity);
    translate:
      calc(var(--decor-panel-x) - 14px)
      calc(var(--decor-panel-y) - 14px);
  }
}
@keyframes hero-rule-grow {
  from { transform: scaleX(.08); }
  to { transform: scaleX(1); }
}
@keyframes hero-rule-head-grow {
  from { left: 8%; }
  to { left: 100%; }
}
@keyframes hero-rule-appear {
  to { opacity: 1; }
}
@keyframes hero-rule-color {
  from { color: var(--blue); }
  to { color: var(--ink); }
}
@keyframes hero-word-in {
  from {
    opacity: 0;
    transform: translateY(.18em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-word-color {
  from { color: var(--blue); }
  to { color: var(--ink); }
}
@keyframes index-highlight {
  0% {
    text-shadow: 0 0 0 rgba(58, 127, 255, 0);
  }
  38% {
    text-shadow: 0 0 18px rgba(58, 127, 255, .6);
  }
  100% {
    text-shadow: 0 0 0 rgba(58, 127, 255, 0);
  }
}
/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  margin-top: var(--pad);
}
.logo {
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.nav {
  display: flex;
  gap: var(--gutter);
  flex-wrap: wrap;
}
.nav a {
  font-weight: 500;
  font-size: 1rem;       /* 16px */
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: color 1.6s ease, opacity .2s;
}
.nav a:hover { color: var(--blue); }
.decor-mode-toggle {
  position: absolute;
  top: 0;
  right: var(--pad);
  z-index: 6;
  width: 34px;
  height: 22px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.decor-mode-toggle span {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  transition:
    background-color 1.6s ease,
    color 1.6s ease,
    transform .28s cubic-bezier(.2,.8,.2,1);
}
body.decor-mode-soft .decor-mode-toggle span {
  transform: translate(12px, -50%);
}
.menu-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: var(--pad);
  z-index: 7;
  width: 34px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: center;
  transition:
    background-color 1.6s ease,
    transform .24s cubic-bezier(.4,0,.2,1),
    top .24s cubic-bezier(.4,0,.2,1);
}
.menu-toggle span:first-child { top: 6px; }
.menu-toggle span:last-child { top: 14px; }
body.menu-open .menu-toggle span:first-child {
  top: 10px;
  transform: rotate(45deg);
}
body.menu-open .menu-toggle span:last-child {
  top: 10px;
  transform: rotate(-45deg);
}
body.decor-paused .decor,
body.decor-paused .decor__code-track,
body.decor-paused .decor__layout-back,
body.decor-paused .decor__layout-block {
  animation-play-state: paused;
}

/* =====================================================================
   01 — Hero
   ===================================================================== */
.hero {
  position: relative;
  padding-top: clamp(200px, 5vw, 300px);
  padding-bottom: var(--pad);
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero > .wrap { position: relative; z-index: 2; }
.hero .index { margin-bottom: clamp(1rem, 1.2vw, 2rem); }

.hero__eyebrows {
  margin-bottom: 2.5rem;
}
.hero__eyebrows .hero__design-rule {
  display: flex;
}
.hero__design-rule {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 42px);
}
.hero__design {
  color: var(--blue);
  opacity: 0;
  animation:
    hero-word-in .5s cubic-bezier(.2,.8,.2,1) .06s both,
    hero-word-color .75s ease .56s both;
}
.hero__rule {
  color: var(--blue);
  align-self: center;
  display: block;
  flex: 1 1 auto;
  height: 1px;
  min-width: 0;
  position: relative;
  opacity: 0;
  animation:
    hero-rule-appear 0s linear .32s both,
    hero-rule-color .75s ease .72s both;
}
.hero__rule::before {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--blue);
  background: currentColor;
  transform: scaleX(.08);
  transform-origin: left center;
  animation:
    hero-rule-grow .82s cubic-bezier(.2,.8,.2,1) .32s both,
    hero-rule-color .75s ease .72s both;
}
.hero__engineering {
  color: var(--blue);
  opacity: 0;
  transition: color 1.6s ease;
  animation: hero-word-in .5s cubic-bezier(.2,.8,.2,1) .68s both;
}
.hero__engineering.is-coloring {
  color: var(--ink);
}
.hero__eyebrows span {
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1.12;
  white-space: nowrap;
}
.hero__rule::after {            /* arrowhead */
  content: "";
  position: absolute;
  left: 100%; top: 50%;
  color: var(--blue);
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-100%, -50%) rotate(45deg);
  animation:
    hero-rule-head-grow .82s cubic-bezier(.2,.8,.2,1) .32s both,
    hero-rule-color .75s ease .72s both;
}
.hero__title {
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 16ch;
}
.hero__title span {
  color: var(--blue);
  display: inline-block;
  opacity: 0;
  animation: hero-word-in 1.05s cubic-bezier(.2,.8,.2,1) both;
  transition: color 1.6s ease;
}
.hero__title.is-coloring span { color: var(--ink); }
.hero__title.is-scroll-blue span {
  color: var(--blue);
  transition-delay: 0s;
}
.hero__title span:nth-child(1) { animation-delay: .08s; transition-delay: .38s; }
.hero__title span:nth-child(2) { animation-delay: .18s; transition-delay: .48s; }
.hero__title span:nth-child(3) { animation-delay: .28s; transition-delay: .58s; }
.hero__title span:nth-child(4) { animation-delay: .38s; transition-delay: .68s; }
.hero__title span:nth-child(5) { animation-delay: .48s; transition-delay: .78s; }
.hero__title span:nth-child(6) { animation-delay: .58s; transition-delay: .88s; }
.hero__title.is-settled span { transition-delay: 0s; }

/* =====================================================================
   02 — What I do
   ===================================================================== */
.whatido__tagline {
  max-width: 16ch;
}
.disc__head {
  margin-bottom: 1rem;
  min-height: clamp(6rem, 10vw, 12rem);
}
.disc__stack {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .06em;
  color: var(--blue);
  text-transform: uppercase;
}
.disc__stack span {
  color: var(--ink);
}
.disc__item + .disc__item { margin-top: clamp(28px, 2.6vw, 44px); }

/* =====================================================================
   03 — About
   ===================================================================== */
.about {
  position: relative;
}
.about .disc__head {
  width: auto;
}
.about .wrap{
  position: relative;
}
.about__photo {
  --about-photo-slide: -36px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  text-align: left;
  transform: translate3d(var(--about-photo-slide), 0, 0);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.about__photo img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
.about__text {
  position: relative;
  background-color: var(--ink);
}
.about__text .bar {
  width: 36px; height: 2px; background: var(--bg);
  position: absolute;
  top: 15px;
  left: -54px;
}
.about__text p {
  color: var(--bg);
}
.about__years {
  font-size: var(--t-body);
  color: var(--white);
  white-space: nowrap;
  background-color: var(--ink);
}
.about__years span {
  color: var(--blue);
}
.about__years b { display: block; font-weight: 700; }

/* =====================================================================
   04 — Projects
   ===================================================================== */
.projects__head { margin-bottom: clamp(48px, 4vw, 96px); }

.projects__list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 4vw, 112px);
}
.project__separator {
  order: 0;
}
.project__separator .line{
  border-top: 1px solid var(--ink);
  height: clamp(var(--pad), 4vw, 112px);
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform .9s cubic-bezier(.2,.8,.2,1),
    border-color 1.6s ease;
}
.project.is-visible .project__separator .line {
  transform: scaleX(1);
}
.project__info {
  display: flex;
  flex-direction: column;
}
.project__date {
  margin-bottom: 1rem;
}
.project__title {
  text-transform: lowercase;
}
.project__role {
  margin-bottom: 1.5rem;
}

.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition:
    background-color 1.6s ease,
    border-color 1.6s ease,
    color 1.6s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }

.project__media-content {
  position: relative;
  display: block;
  aspect-ratio: 1032 / 481;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
}
.project__media-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .18s cubic-bezier(.4,0,.2,1);
}
.project__media-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    opacity .18s cubic-bezier(.4,0,.2,1);
}
.project__media-content:hover::after,
.project__media-content:focus-visible::after {
  opacity: .18;
}
.project__media-content:hover img,
.project__media-content:focus-visible img {
  opacity: .92;
  transform: scale(1.035);
}
.project-01 .project__media-content img{
  object-position: center top;
}

/* =====================================================================
   05 — Contacts
   ===================================================================== */
.contacts__head { margin-bottom: clamp(36px, 4vw, 64px); }
.contacts__head .heading { color: var(--white); margin-top: 14px; }
.contacts__list { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 18px); }
.contacts__list a {
  font-weight: 500;
  font-size: var(--t-body);
  color: var(--bg);
  width: max-content;
  max-width: 100%;
  transition: color 1.6s ease;
}
.contacts__list a:hover { color: var(--blue); }

a,
button,
.btn,
.nav a,
.contacts__list a {
  transition-property: color, background-color, border-color, opacity;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   Project detail
   ===================================================================== */
.project-page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}
.project-page .site-header {
  margin-top: var(--pad);
}
.project-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.project-header__back {
  position: absolute;
  left: 0;
  top: 0;
}
.project-page .nav {
  position: fixed;
  top: calc(var(--pad) + 42px);
  right: var(--pad);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  padding-block: 18px;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    background-color 1.6s ease,
    opacity .2s cubic-bezier(.4,0,.2,1),
    transform .2s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .2s;
}
.project-page.menu-open .nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    background-color 1.6s ease,
    opacity .2s cubic-bezier(.4,0,.2,1),
    transform .2s cubic-bezier(.4,0,.2,1),
    visibility 0s;
}
.project-page .menu-toggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}
.project-detail {
  padding-top: clamp(120px, 14vw, 240px);
}
.project-detail__hero {
  padding-bottom: clamp(32px, 4vw, 64px);
}
.project-detail__narrow {
  width: min(100%, 760px);
  margin-inline: auto;
}
.project-detail__meta {
  text-align: center;
  margin-bottom: clamp(32px, 2vw, 56px);
}
.project__title {
  justify-content: center;
}
.project-detail__title {
  justify-content: center;
  margin-bottom: clamp(40px, 8vw, 96px);
  text-align: center;
}
.project-detail__content {
  justify-content: center;
}
.project-detail__section {
  padding-block: 0 clamp(40px, 2vw, 72px);
}
.project-detail__nav-section {
  padding-block: 0 clamp(40px, 2vw, 72px);
}
.project-detail__media{
  padding-bottom: clamp(32px, 4vw, 64px);
}
.project-detail__media img{
  width: 100%;
  height: auto;
}
.project-detail__media .row {
  justify-content: center;
}
.project-detail__list {
  line-height: 1.5;
  margin: 0;
  padding-top: .5rem;
  padding-left: 1.2rem;
  list-style: disc;
}
.project-detail__list li {
  padding-left: .25rem;
}
.project-detail__list li + li { margin-top: .4rem; }
.project-detail__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
  padding-top: clamp(8px, 2vw, 32px);
}
.project-detail__context-info {
  justify-content: center;
  padding-block: 0 clamp(80px, 10vw, 160px);
  margin-top: 2rem;
}

.project-detail__context-info .context-info-content {
  border-top: 1px solid rgba(11, 20, 35, 0.3);
  padding-top: 2rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 300;
  color: var(--ink);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (min-width: 560px) {
  .col-sm-0 { display: none; }
  .col-sm,
  .col-sm-auto,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    display: block;
  }
  .col-sm { flex: 1 0 0%; max-width: 100%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 900px) {
  .col-md-0 { display: none; }
  .col-md,
  .col-md-auto,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    display: block;
  }
  .col-md { flex: 1 0 0%; max-width: 100%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-lg-0 { display: none; }
  .col-lg,
  .col-lg-auto,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    display: block;
  }
  .col-lg { flex: 1 0 0%; max-width: 100%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1600px) {
  body:not(.project-page) .site-header .nav { gap: 0; }
  body:not(.project-page) .site-header .nav a {
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
  }
}

@media (max-width: 1380px) {
  .hero__title {
    font-size: var(--t-hero-lg);
  }
}

@media (max-width: 1200px) {
  .decor-mode-toggle {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .navbar {
    position: static;
  }
  .nav {
    position: absolute;
    top: calc(var(--pad) + 36px);
    right: 0;
    padding: var(--pad);
    width: 160px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    padding-block: 18px;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      background-color 1.6s ease,
      opacity .2s cubic-bezier(.4,0,.2,1),
      transform .2s cubic-bezier(.4,0,.2,1),
      visibility 0s linear .2s;
  }
  body.menu-open .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      background-color 1.6s ease,
      opacity .2s cubic-bezier(.4,0,.2,1),
      transform .2s cubic-bezier(.4,0,.2,1),
      visibility 0s;
  }

  .about__text .bar {
    display: none;
  }
  .whatido__lead {
    display: flex;
  }
  .disc__head {
    width: calc(50% + var(--gutter) / 2);
    min-width: calc(50% + var(--gutter) / 2);
  }
  .whatido__tagline {
    max-width: 24ch;
    margin-bottom: 6rem;
  }
}

@media (max-width: 900px) {
  .project { grid-template-columns: 1fr; }
  .project-detail__title {
    max-width: none;
  }
  .project-detail__section {
    gap: 24px;
  }
  .project-detail__nav {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3rem;
  }
  .hero__title { max-width: none; }

  .hero__title {
    font-size: var(--t-hero-lg);
  }
  .about__photo {
    left: auto;
    height: 224px;
    width: 224px;
    overflow: hidden;
    margin-bottom: 2rem;
    margin-left: var(--pad);
    margin-right: auto;
    background-color: #1f304a;
    position: absolute;
    top: 180px;
    right: var(--pad);
  }
  .about__photo img {
    object-position: left top;
  }
  .about .wrap {
    padding-right: 300px;
  }
  .about__text .bar {
    display: none;
  }
  .about__years-head {
    display: none;
  }
  .project__info {
    order: 2;
  }
  .project__media {
    order: 1;
    margin-bottom: 1.5rem;
  }
  .project__date {
    margin-bottom: .75rem;
  }
  .project__role {
    margin-bottom: 1rem;
  }
}

@media (max-width: 750px) {
  .hero__title {
    font-size: var(--t-hero-md);
  }
  .hero {
    align-items: center;
    padding-top: clamp(64px, 5vw, 300px);
  }
}

@media (max-width: 640px) {
  .project-header {
    min-height: 72px;
    align-items: flex-start;
  }
  .project-header .logo {
    padding-top: 96px;
  }
  .project-header__back {
    top: 0;
  }
  .project-page .menu-toggle {
    top: 0;
  }
  .project-detail {
    padding-top: 220px;
  }

  .about__photo {
    bottom: 64px;
    left: 50%;
    margin: 0;
    transform: translate3d(calc(-50% + var(--about-photo-slide, 0px)), 0, 0);
    right: auto;
    top: auto;
    border-radius: 112px;
  }
  .about .wrap {
    padding-right: var(--pad);
    padding-bottom: 260px;
  }
}

@media (max-width: 560px) {
  .site-header .wrap { gap: 14px; }
  .nav a { font-size: 1rem; }
  .hero__eyebrows span { font-size: var(--t-label); }
  .hero__title {
    font-size: var(--t-hero-sm);
  }
  .whatido__lead {
    display: block;
  }
  .disc__head {
    width: auto;
    min-width: unset;
  }
  .whatido__lead .disc__head {
    min-height: unset;
  }
  .whatido__tagline {
    margin-bottom: 4rem;
  }
  .ui-ux-design {
    margin-bottom: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .decor__code-track { animation: none !important; }
  .decor,
  .decor__layout-back,
  .decor__layout-block,
  .hero__rule,
  .hero__design,
  .hero__engineering,
  .hero__title span { animation: none !important; color: var(--ink); opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .about__photo { transform: none; }
  .project__separator .line { transform: none; }
}