:root {
  --ink: #361a1c;
  --yellow: #ffea75;
  --paper: #ffffff;
  --reveal-duration: 1.35s;
  --video-edge: 65.3vw;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
}

body {
  font-family: "Jost", Arial, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

button { font: inherit; }

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  opacity: 1;
  transition: opacity .18s ease;
}

/*
  The video begins full-screen. During the reveal the visible video panel
  becomes narrower, while the video itself glides left and slightly scales down.
  This leaves a clean white column for the typography.
*/
.hero__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #eaf1f4;
  transition: width var(--reveal-duration) cubic-bezier(.2,.74,.18,1);
  will-change: width;
}

.hero__video {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100vw;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translateX(0) scale(1);
  transform-origin: left center;
  transition:
    width var(--reveal-duration) cubic-bezier(.2,.74,.18,1),
    transform var(--reveal-duration) cubic-bezier(.2,.74,.18,1);
  will-change: width, transform;
}

.language {
  position: absolute;
  z-index: 5;
  top: 5.3vh;
  right: 4.7vw;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-size: clamp(16px, 1.95vw, 31px);
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .65s ease .55s, transform .65s ease .55s;
}

.language__item {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.language__item:not(.is-active) { opacity: .72; }

/* Entire title sits on the white panel; no letters straddle the video edge. */
.hero__title {
  position: absolute;
  z-index: 3;
  top: 27.2vh;
  left: calc(var(--video-edge) + 6.1vw);
  width: 27vw;
  color: var(--yellow);
  pointer-events: none;
}

.hero__word {
  position: absolute;
  left: 0;
  width: max-content;
  font-family: "Jost", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(92px, 9.8vw, 178px);
  line-height: .78;
  letter-spacing: -.055em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(52px);
  filter: blur(7px);
  transition:
    opacity .78s ease,
    transform 1s cubic-bezier(.2,.8,.2,1),
    filter .8s ease;
}

.hero__word--port { top: 0; }
.hero__word--folio {
  top: 1.26em;
  transition-delay: .08s;
}

.hero__signature {
  position: absolute;
  z-index: 4;
  left: 8.1vw;
  top: clamp(250px, 18.6vw, 340px);
  font-family: "Great Vibes", cursive;
  font-size: clamp(62px, 6.15vw, 112px);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translate(28px, 18px) rotate(-7deg);
  transition:
    opacity .72s ease .19s,
    transform 1.1s cubic-bezier(.16,.8,.18,1) .19s;
}

.hero__folder {
  position: absolute;
  z-index: 4;
  height: auto;
  opacity: 0;
  transform: scale(.74) rotate(-8deg);
  transition:
    opacity .55s ease .22s,
    transform .85s cubic-bezier(.2,.8,.2,1) .22s;
  pointer-events: none;
}

/* Coordinates follow the supplied screenshot rather than the text block. */
.hero__folder--pink {
  width: clamp(42px, 4.5vw, 78px);
  right: 4.45vw;
  top: 18.3vh;
}

.hero__folder--blue {
  width: clamp(48px, 5vw, 86px);
  left: calc(var(--video-edge) + 1.3vw);
  top: 82.3vh;
  transform: scale(.74) rotate(-14deg);
}

.hero.is-revealed .hero__media { width: var(--video-edge); }
.hero.is-revealed .hero__video {
  width: 76vw;
  transform: translateX(-9.5vw);
}
.hero.is-revealed .language { opacity: 1; transform: translateY(0); }
.hero.is-revealed .hero__word { opacity: 1; transform: translateX(0); filter: blur(0); }
.hero.is-revealed .hero__signature { opacity: 1; transform: translate(0,0) rotate(-7deg); }
.hero.is-revealed .hero__folder { opacity: 1; transform: scale(1) rotate(-8deg); }
.hero.is-revealed .hero__folder--blue { transform: scale(1) rotate(-14deg); }

/* Hidden reset between loops; the reveal itself stays unchanged. */
.hero.is-loop-fading { opacity: 0; }
.hero.is-resetting,
.hero.is-resetting * {
  transition: none !important;
}

@media (max-aspect-ratio: 4/5) {
  :root { --video-edge: 100vw; }
  .hero { min-height: 100svh; }
  .hero.is-revealed .hero__media { width: 100%; }
  .hero.is-revealed .hero__video { width: 100vw; transform: translateX(-4vw) scale(.97); }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, transparent 47%, rgba(255,255,255,.25) 60%, #fff 79%);
    pointer-events: none;
  }
  .language { top: 2.6rem; right: 1.5rem; font-size: 16px; }
  .hero__title { top: auto; bottom: 7vh; left: 52vw; width: 46vw; }
  .hero__word { font-size: clamp(72px, 21vw, 118px); }
  .hero__word--folio { top: 1.18em; }
  .hero__signature {
    font-size: clamp(54px, 14vw, 78px);
    left: 3vw;
    top: 2.35em;
  }
  .hero__folder--pink { top: auto; bottom: 31vh; left: auto; right: 1.75rem; }
  .hero__folder--blue { top: auto; bottom: 8vh; left: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================
   ABOUT / HI SCREEN — fixed design canvas
   Source layout: 944 × 859 reference. The entire composition scales as ONE unit.
   ========================= */
.about {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
  color: var(--ink);
}

/*
  This is intentionally a fixed-ratio artboard rather than a viewport-driven layout.
  Every coordinate, size and gap scales together, preserving the exact amount of air
  from the portfolio design on narrower and wider desktop screens.
*/
.about__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 944 / 859;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  background: #fff;
}

.about__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.about__hi {
  position: absolute;
  left: 4.95%;
  top: 10.9%;
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: 19.9cqw;
  font-weight: 400;
  line-height: .9;
  color: var(--ink);
  white-space: nowrap;
}

.about__intro,
.about__story {
  position: absolute;
  left: 5.72%;
  margin: 0;
  width: 43.5%;
  font-family: "Jost", Arial, sans-serif;
  font-weight: 400;
  font-size: 2.03cqw;
  line-height: 1.31;
  letter-spacing: -.018em;
  color: var(--ink);
}

.about__intro { top: 35.55%; }

.about__story {
  top: 50.55%;
}
.about__story p { margin: 0; }

.about__highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.about__highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* The source artwork includes the little round “pin” on the left.
     Extend the swipe past the span so it starts at the paragraph margin,
     exactly like the PDF rather than behaving like a tight underline. */
  left: -1.28em;
  right: -.10em;
  top: .34em;
  height: 1.08em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .82;
}

.about__highlight--long::before { background-image: url("assets/highlight-long.png"); }
.about__highlight--short::before {
  background-image: url("assets/highlight-short.png");
  left: -1.28em;
  right: -.10em;
}

.about__visual {
  position: absolute;
  z-index: 1;
  left: 52.9%;
  top: 10.25%;
  width: 43.55%;
  pointer-events: none;
}

.about__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* The strips are part of the fixed canvas too; their location no longer depends on viewport height. */
.about__ticker {
  position: absolute;
  left: -2.2%;
  width: 118%;
  z-index: 4;
  overflow: hidden;
  white-space: nowrap;
  transform-origin: left center;
}

.about__ticker {
  display: flex;
  align-items: center;
}

.about__ticker-track {
  flex: 0 0 auto;
  width: max-content;
  font-family: "Jost", Arial, sans-serif;
  font-weight: 400;
  font-size: 3.55cqw;
  line-height: 1;
  color: #111;
  white-space: nowrap;
  padding: 0;
  will-change: transform;
}

.about__ticker--blue {
  top: 73.25%;
  height: 9.45%;
  background: #96e8f5;
  transform: rotate(7.25deg);
}

.about__ticker--yellow {
  top: 88.25%;
  height: 9.25%;
  background: #ffed7d;
  transform: rotate(-6.15deg);
}

.about__ticker--blue .about__ticker-track {
  transform: translateY(-0.04em);
  animation: about-marquee-left 24s linear infinite;
}

.about__ticker--yellow .about__ticker-track {
  margin-left: -3.5%;
  transform: translateY(-0.02em);
  animation: about-marquee-right 27s linear infinite;
}

@keyframes about-marquee-left {
  from { translate: 0 0; }
  to   { translate: -32% 0; }
}

@keyframes about-marquee-right {
  from { translate: -27% 0; }
  to   { translate: 0 0; }
}


/* Desktop-first fidelity: keep the same canvas proportions on every width for now.
   Mobile-specific re-composition will be added after the desktop portfolio is locked. */
@media (prefers-reduced-motion: reduce) {
  .about__ticker-track { animation: none !important; }
}

@media (max-width: 760px) {
  .about__inner {
    min-width: 0;
    aspect-ratio: 944 / 859;
  }
}

/* =========================
   PROJECTS -> CONTACTS
   Fixed artboards rendered from the approved portfolio master.
   Each section scales as one composition, preserving the exact spacing,
   typography, imagery and decorative elements from the PDF on any desktop width.
   ========================= */
.portfolio-artboards {
  width: 100%;
  background: #fff;
}

.portfolio-artboard {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

.portfolio-artboard > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Invisible clickable areas over the contact artwork. */
.contact-hit {
  position: absolute;
  z-index: 5;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
}

.contact-hit:focus-visible {
  outline: 3px solid rgba(54, 26, 28, .55);
  outline-offset: 4px;
}

/* Coordinates are relative to the 2560 × 2118 contact artboard. */
.contact-hit--mail {
  left: 39.3%;
  top: 50.2%;
  width: 39.6%;
  height: 6.0%;
}

.contact-hit--telegram {
  left: 39.3%;
  top: 58.2%;
  width: 25.0%;
  height: 6.0%;
}

.contact-hit--wechat {
  left: 39.3%;
  top: 66.3%;
  width: 22.5%;
  height: 6.0%;
}

.copy-toast {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 9%;
  transform: translate(-50%, 10px);
  padding: .7em 1.15em;
  border-radius: 999px;
  background: rgba(54, 26, 28, .92);
  color: #fff;
  font-size: clamp(12px, 1.15vw, 20px);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================
   V19 polish from Laura's review
   ========================= */
/* Keep the marker artwork at its natural-feeling height instead of flattening it. */
.about__highlight::before {
  top: -0.06em;
  height: 1.92em;
  background-size: 100% 100%;
}

/* True vertical centering for text inside both moving strips. */
.about__ticker-track {
  height: 100%;
  display: flex;
  align-items: center;
  line-height: 1;
}
.about__ticker--blue .about__ticker-track,
.about__ticker--yellow .about__ticker-track {
  transform: none;
}

/* Live text overlays used where the raster master needed tiny copy edits. */
.project1-final-copy,
.project2-copy,
.project3-copy {
  position: absolute;
  z-index: 3;
  font-family: "Jost", Arial, sans-serif;
  color: #111;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.project1-final-copy {
  left: 15.2%;
  top: 45.05%;
  width: 69.5%;
  text-align: center;
  font-size: 1.88vw;
  font-weight: 400;
}
.project2-copy {
  left: 3.9%;
  top: 13.4%;
  width: 36%;
  font-size: 1.34vw;
  font-weight: 400;
}
.project2-copy strong,
.project3-copy strong {
  display: block;
  font-weight: 600;
  margin-bottom: .08em;
}
.project2-copy span,
.project3-copy span {
  display: block;
}
.project2-copy strong:nth-of-type(2) { margin-top: 1.02em; }

.project3-copy {
  left: 63.25%;
  top: 69.7%;
  width: 31.8%;
  font-size: 1.18vw;
  font-weight: 400;
}
.project3-copy strong:nth-of-type(2) { margin-top: .92em; }

/* Clicking the pictograms works as well as clicking the written contact. */
.contact-hit--mail-icon {
  left: 14.8%;
  top: 48.0%;
  width: 8.0%;
  height: 8.5%;
}
.contact-hit--telegram-icon {
  left: 14.7%;
  top: 56.4%;
  width: 8.0%;
  height: 8.3%;
}
.contact-hit--wechat-icon {
  left: 14.7%;
  top: 64.6%;
  width: 8.0%;
  height: 8.5%;
}


/* =========================
   V27 — clean Project 1 rebuild from the V19 stable base
   ========================= */
.project1-final-copy {
  left: 18.44%;
  top: 45.72%;
  width: 63.36%;
  height: 3.34%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.76vw;
  line-height: 1.16;
  font-weight: 400;
}


/* V28: Project 1 rebuilt as a single full-width artboard */
.project1-final-copy { display:none !important; }

/* =========================
   V32 — clean EN / RU switch
   RU raster sections are separate finished assets, not cover overlays.
   ========================= */
[hidden] { display: none !important; }

body[data-language="ru"] .about__hi { top: 12.1%; font-size: 14.6cqw; }
body[data-language="ru"] .about__intro,
body[data-language="ru"] .about__story { font-size: 1.86cqw; line-height: 1.31; }
body[data-language="ru"] .about__story { top: 49.7%; }
body[data-language="ru"] .hero__word { letter-spacing: -.065em; }
.project2-copy--ru { font-size: 1.20vw; }
.project3-copy--ru { font-size: 1.05vw; }

/* =========================
   V35 — RU typography uses the same families as EN.
   The original artwork stays raster; only translated type is live.
   ========================= */
.ru-script { font-family: "Great Vibes", cursive !important; font-weight: 400; }

/* Project 1: exact full-width folder asset; translated typography only. */
.p1-ru-type,
.project2-art-ru,
.project3-art-ru,
.process-art-ru,
.contacts-art-ru {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  line-height: 1.16;
  color: #111;
}
.p1-ru-projects {
  position: absolute;
  left: 27.0%; top: 1.05%; width: 49%;
  text-align: center;
  font-family: "Great Vibes", cursive;
  color: #361a1c;
  font-size: 7.6vw;
  line-height: .9;
}
.p1-ru-folder-intro {
  position: absolute;
  left: 7.8%; top: 23.25%; width: 76%;
  font-family: "Jost", Arial, sans-serif;
  font-size: 1.72vw;
  font-weight: 400;
  letter-spacing: -.015em;
}
.p1-ru-expression,
.p1-ru-consistency {
  position: absolute;
  font-family: "Great Vibes", cursive;
  color: #361a1c;
  font-size: 2.25vw;
  line-height: 1.02;
}
.p1-ru-expression { left: 10.2%; top: 32.0%; width: 24%; text-align: left; }
.p1-ru-consistency { left: 47.0%; top: 35.6%; width: 27%; text-align: center; }

/* Project 2 */
.project2-title-ru {
  position:absolute; left:4.0%; top:3.9%; width:24.5%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:1.75vw; color:#361a1c;
}
.project2-note-ru {
  position:absolute; left:36.0%; top:22.6%; width:34.5%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:.86vw; line-height:1.08; color:#111;
}

/* Project 3 */
.project3-title-ru {
  position:absolute; left:43.2%; top:7.0%; width:14.5%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:1.75vw; color:#361a1c;
}

/* Process */
.process-title-ru {
  position:absolute; left:20%; top:7.0%; width:60%;
  text-align:center; font-family:"Great Vibes",cursive;
  font-size:7.4vw; line-height:.9; color:#361a1c;
}
.process-block { position:absolute; font-family:"Jost",Arial,sans-serif; font-size:1.42vw; line-height:1.38; }
.process-block strong { display:block; font-weight:600; margin-bottom:.34em; }
.process-block span { display:block; font-weight:400; }
.process-block--1 { left:12.8%; top:48.6%; width:31%; }
.process-block--2 { left:51.5%; top:48.6%; width:35%; }
.process-block--3 { left:12.8%; top:71.8%; width:34%; }
.process-block--4 { left:51.5%; top:71.8%; width:36%; }

/* Contacts */
.contacts-title-ru {
  position:absolute; left:17%; top:12.5%; width:66%;
  text-align:center; font-family:"Great Vibes",cursive;
  font-size:7.6vw; line-height:.9; color:#361a1c;
}
.contacts-cta-ru {
  position:absolute; left:20%; top:34.6%; width:60%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:1.82vw; font-weight:500; color:#111;
}
.contacts-row { position:absolute; left:27.0%; width:54%; display:flex; align-items:baseline; gap:3.2vw; color:#111; }
.contacts-row em { width:12%; font-family:"Great Vibes",cursive; font-style:normal; font-size:2.6vw; color:#361a1c; white-space:nowrap; }
.contacts-row span { font-family:"Jost",Arial,sans-serif; font-size:2.05vw; white-space:nowrap; }
.contacts-row--mail { top:49.0%; }
.contacts-row--telegram { top:57.1%; }
.contacts-row--wechat { top:65.2%; }
.contacts-clickable-ru { position:absolute; left:17.2%; top:80.7%; font-family:"Jost",Arial,sans-serif; font-size:1.55vw; color:#111; }
.p1-ru-project-title {
  position:absolute; left:61.0%; top:8.0%; width:17.5%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:1.75vw; color:#361a1c;
}
.p1-ru-brief {
  position:absolute; left:47.2%; top:13.15%; width:45%;
  font-family:"Jost",Arial,sans-serif; font-size:1.36vw;
  line-height:1.28; color:#111;
}
.p1-ru-brief strong { display:block; font-weight:600; margin-bottom:.12em; }
.p1-ru-brief span { display:block; font-weight:400; }
.p1-ru-from-one {
  position:absolute; left:47.4%; top:17.9%; width:43.5%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:1.37vw; color:#111;
}
.p1-ru-final-note {
  position:absolute; left:22.2%; top:46.75%; width:57.5%;
  text-align:center; font-family:"Jost",Arial,sans-serif;
  font-size:1.43vw; line-height:1.22; color:#111;
}

/* =========================
   V38 — selectable text for raster artwork
   Visual artwork stays untouched. Invisible live text follows the baked type
   so visitors can select/copy it without changing the approved composition.
   ========================= */
.raster-text-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  line-height: 1.2;
}
.raster-selectable {
  position: absolute;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  cursor: text;
  font-family: "Jost", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  white-space: normal;
}
.raster-script { font-family: "Great Vibes", cursive; }

/* Caption baked into Laura's photo card. */
.about-card-selectable {
  position: absolute;
  left: 22%;
  top: 84.5%;
  width: 66%;
  height: 8%;
  z-index: 2;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  cursor: text;
  font-family: "Great Vibes", cursive;
  font-size: 4.2vw;
  line-height: 1;
  white-space: nowrap;
}
.about__ticker-track { user-select: text; -webkit-user-select: text; }

/* Project 1 — coordinates follow the fixed 2560 × 9010 artboard. */
.p1-select-projects { left: 27%; top: .9%; width: 47%; height: 5%; font-size: 7.5vw; text-align: center; }
.p1-select-title { left: 61%; top: 7.6%; width: 18%; height: 2.2%; font-size: 1.8vw; text-align: center; }
.p1-select-brief { left: 47.3%; top: 12.7%; width: 43%; height: 4.9%; font-size: 1.35vw; line-height: 1.28; }
.p1-select-from { left: 48%; top: 17.7%; width: 42.5%; height: 2%; font-size: 1.35vw; text-align: center; }
.p1-select-foundation { left: 7.5%; top: 22.7%; width: 78%; height: 3.8%; font-size: 1.7vw; line-height: 1.18; }
.p1-select-expression { left: 8.2%; top: 31.7%; width: 28%; height: 4%; font-size: 2.35vw; line-height: 1.05; }
.p1-select-consistency { left: 43%; top: 35.2%; width: 31%; height: 4%; font-size: 2.25vw; line-height: 1.05; text-align: center; }
.p1-select-final { left: 20%; top: 45.95%; width: 60%; height: 3.3%; font-size: 1.45vw; line-height: 1.22; text-align: center; }

/* Project 2 baked title and explanatory note. */
.p2-select-title { left: 4%; top: 3.4%; width: 25%; height: 4%; font-size: 1.85vw; text-align: center; }
.p2-select-note { left: 40%; top: 22.2%; width: 40%; height: 7%; font-size: .92vw; line-height: 1.15; text-align: center; }

/* Project 3 baked title. */
.p3-select-title { left: 43%; top: 11.8%; width: 16%; height: 5%; font-size: 1.85vw; text-align: center; }

/* Process artboard. */
.process-select-title { left: 25%; top: 8%; width: 50%; height: 22%; font-size: 7.8vw; text-align: center; line-height: .9; }
.process-select-1 { left: 13.5%; top: 50.5%; width: 29%; height: 17%; font-size: 1.38vw; line-height: 1.45; }
.process-select-2 { left: 52.3%; top: 50.5%; width: 30%; height: 17%; font-size: 1.38vw; line-height: 1.45; }
.process-select-3 { left: 13.5%; top: 73.7%; width: 30%; height: 18%; font-size: 1.38vw; line-height: 1.45; }
.process-select-4 { left: 52.3%; top: 73.7%; width: 31%; height: 18%; font-size: 1.38vw; line-height: 1.45; }

/* Contacts artboard. Values themselves live inside the existing clickable hit areas. */
.contacts-select-title { left: 25%; top: 9%; width: 51%; height: 22%; font-size: 8vw; text-align: center; line-height: .9; }
.contacts-select-cta { left: 26%; top: 34%; width: 49%; height: 5%; font-size: 1.55vw; text-align: center; }
.contacts-select-label { left: 27%; width: 14%; height: 6%; font-size: 2.55vw; line-height: 1; white-space: nowrap; }
.contacts-select-mail { top: 49.1%; }
.contacts-select-telegram { top: 57.2%; }
.contacts-select-wechat { top: 65.2%; }
.contacts-select-clickable { left: 17%; top: 80%; width: 17%; height: 6%; font-size: 1.45vw; }

/* Existing click targets now contain transparent live text, too. */
.contact-hit--mail,
.contact-hit--telegram,
.contact-hit--wechat {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  user-select: text;
  -webkit-user-select: text;
  font-family: "Jost", Arial, sans-serif;
  font-size: 2.05vw;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
}

/* =========================
   V40 — mobile hero only
   Keep the intro inside one phone viewport. On reveal, the video folds into
   the upper part of the screen and the portfolio title occupies the white
   panel below it. Desktop/tablet landscape remains unchanged.
   ========================= */
@media (max-width: 768px) {
  .hero {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #fff;
  }

  .hero__media {
    inset: 0 0 auto 0;
    width: 100% !important;
    height: 100%;
    transition: height var(--reveal-duration) cubic-bezier(.2,.74,.18,1);
  }

  .hero__video {
    inset: 0;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    object-position: 50% 48%;
    transform: none !important;
    transform-origin: center center;
    transition: transform var(--reveal-duration) cubic-bezier(.2,.74,.18,1);
  }

  .hero.is-revealed .hero__media {
    width: 100% !important;
    height: 55%;
  }

  .hero.is-revealed .hero__video {
    width: 100% !important;
    height: 100%;
    transform: scale(1.01) !important;
  }

  .hero::after {
    display: none !important;
    content: none !important;
  }

  .hero__title {
    top: 57%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 43%;
    color: var(--yellow);
    text-align: center;
  }

  .hero__word {
    left: 50%;
    width: max-content;
    font-size: clamp(66px, 20.5vw, 92px);
    line-height: .76;
    letter-spacing: -.055em;
    transform: translateX(calc(-50% + 28px));
  }

  .hero__word--port { top: 1.8vh; }
  .hero__word--folio { top: 11.0vh; }

  .hero.is-revealed .hero__word {
    transform: translateX(-50%);
  }

  .hero__signature {
    left: 50%;
    top: 20.5vh;
    font-size: clamp(52px, 14.5vw, 70px);
    transform: translate(calc(-50% + 18px), 14px) rotate(-7deg);
  }

  .hero.is-revealed .hero__signature {
    transform: translate(-50%, 0) rotate(-7deg);
  }

  .hero__folder--pink {
    width: 46px;
    top: 63%;
    bottom: auto;
    left: auto;
    right: 7vw;
  }

  .hero__folder--blue {
    width: 50px;
    top: auto;
    bottom: 7%;
    left: 8vw;
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .hero__word { font-size: clamp(58px, 18vw, 76px); }
  .hero__word--folio { top: 10vh; }
  .hero__signature { top: 18.5vh; font-size: clamp(46px, 13vw, 62px); }
}