/* ==========================================================
   REZN® — single case study page (project.html)
   Editorial layout: huge uppercase title → meta columns
   (client / involvement / overview) → full-width media,
   statement texts with a side label, offset photo pairs
   → "More projects" → CTA with the brief form → footer.
   ========================================================== */
:root {
  --bg: #f1f1ef;
  --fg: #0f0f10;
  --muted: #7a7a7e;
  --line: rgba(15, 15, 16, .12);
  --accent: #ff4a24;
  --sans: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide-type: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(14px, 1.8vw, 40px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  /* 12-column grid shared by the meta row, the text blocks and the CTA */
  --grid: repeat(12, minmax(0, 1fr));
  --gutter: clamp(12px, 1.4vw, 28px);
  --radius: clamp(12px, 1.2vw, 24px);   /* corner of every card / media block on the case page */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* soft colour glow behind the page (fixed, so it never repaints on scroll) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at 8% 0%, rgba(255, 196, 180, .45), transparent 70%),
    radial-gradient(50% 45% at 92% 12%, rgba(196, 206, 240, .55), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(222, 226, 236, .6), transparent 70%);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- page curtain ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 9000; background: #0e0e0f;
  transform: translateY(0); pointer-events: none;
}
body:not(.is-entering) .curtain { transform: translateY(-101%); transition: transform 1s var(--ease-io); }
body.is-leaving .curtain { transform: translateY(0); transition: transform .7s var(--ease-io); }


/* ---------- hero: title + meta ---------- */
.p-hero { padding: calc(var(--head-space) + clamp(70px, 12vh, 170px)) var(--pad) 0; }
.p-hero__title {
  margin: 0; max-width: 22ch;
  font-family: var(--wide-type); font-weight: 400;
  font-size: clamp(34px, 4.7vw, 124px); line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase;
}
.p-meta {
  display: grid; grid-template-columns: var(--grid); column-gap: var(--gutter);
  margin-top: clamp(48px, 6vw, 110px);
  font-size: clamp(13px, .82vw, 16px); font-weight: 500; line-height: 1.35;
}
.p-meta__col:nth-child(1) { grid-column: 1 / span 2; }
.p-meta__col:nth-child(2) { grid-column: 3 / span 3; }
.p-meta__col--text { grid-column: 6 / span 4 !important; }
.p-meta p { margin: 0; }
.p-meta__k { color: var(--muted); font-size: .86em; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px !important; }
.p-meta__v + .p-meta__k { margin-top: 24px; }
.p-meta__desc { max-width: 46ch; }
.p-meta__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.tlink {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px;
  font-size: .9em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--line); transition: border-color .4s;
}
.tlink:hover { border-color: currentColor; }
.tlink .arr { display: inline-block; transition: transform .4s var(--ease); }
.tlink:hover .arr { transform: translate(2px, -2px); }

/* ---------- blocks: vertical rhythm ---------- */
.blk { position: relative; }
.blk--image, .blk--pair { margin-top: clamp(14px, 4.4vw, 120px); }
.blk--text, .blk--text + .blk { margin-top: clamp(90px, 11vw, 280px); }
.p-hero + .blk, .p-hero + .ed-add + .blk { margin-top: clamp(48px, 5.6vw, 140px); }

/* ---------- media ---------- */
.media { padding: 0 var(--pad); }
.frame {
  position: relative; overflow: hidden; margin: 0; background: #dcdcdc; border-radius: var(--radius);
  /* framing from the admin: --d* for desktop, --m* for mobile (falls back to desktop) */
  --x: var(--dx, 50%); --y: var(--dy, 50%); --z: var(--dz, 1);
}
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--x) var(--y); transform-origin: var(--x) var(--y);
  scale: calc(var(--z) * 1.1); translate: 0 var(--py, 0); will-change: translate;
}
.frame--hero { aspect-ratio: var(--dr, 16 / 9); }
/* recorded screens keep their own 16:9 on every device, so nothing gets cropped */
.frame--video { aspect-ratio: 16 / 9 !important; background: #0a1714; }
.frame--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame--wide { aspect-ratio: var(--dr, 16 / 9); }
/* website screenshot shown whole: natural height, no zoom, no crop (every screen size) */
.frame--shot { aspect-ratio: auto !important; background: none; }
.frame--shot img { display: block; height: auto; object-fit: initial; scale: 1; translate: none; will-change: auto; }

/* "browser" shot sits on a black stage, like a presentation board */
.stage { display: grid; place-items: center; padding: clamp(28px, 7vw, 180px) clamp(16px, 11vw, 300px); background: #0c0c0d; border-radius: var(--radius); overflow: hidden; }
.frame--device {
  width: 100%; border-radius: clamp(6px, .6vw, 12px); background: #1c1c1e;
  padding: clamp(22px, 2.2vw, 40px) clamp(4px, .5vw, 8px) clamp(4px, .5vw, 8px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
}
.frame--device::before {
  content: ""; position: absolute; left: clamp(10px, 1vw, 18px); top: clamp(8px, .75vw, 15px);
  width: 40px; height: 8px;
  background: radial-gradient(circle 4px at 4px 4px, #48484b 98%, transparent) 0 0 / 15px 8px repeat-x;
}
.frame--device img { border-radius: 4px; aspect-ratio: var(--dr, 16 / 9); height: auto; scale: var(--z); translate: none; }

/* photo pair: big one on the left, smaller one lower on the right */
.media--pair {
  display: grid; grid-template-columns: 50fr 13fr 37fr; align-items: start;
}
.frame--a { grid-column: 1; aspect-ratio: var(--dr, 4 / 5); }
.frame--b { grid-column: 3; aspect-ratio: var(--dr, 4 / 5); margin-top: clamp(60px, 12vw, 320px); }

/* phone screenshots: the same big offset tiles as photo pairs, each with a whole
   phone screen fitted inside (nothing cropped, nothing blown up) */
.media.media--phones { background: none; }
.media--phones > .frame {
  display: grid; place-items: center; aspect-ratio: 4 / 5 !important;
  background: radial-gradient(70% 60% at 50% 38%, #f7f7f4 0%, transparent 75%), linear-gradient(165deg, #ecece8, #d8dad4);
}
.media--phones > .frame img {
  position: absolute; inset: 0; margin: auto;   /* centred in the tile */
  width: auto; height: 86%; aspect-ratio: 1170 / 2532;
  object-fit: cover; object-position: 50% 0 !important; scale: 1 !important; translate: none !important;
  border: clamp(4px, .42vw, 8px) solid #141515; border-radius: clamp(20px, 2.3vw, 46px); background: #000;
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .45), 0 10px 22px -12px rgba(0, 0, 0, .3);
}

/* ---------- text blocks: label on the left, statement on the right ---------- */
.block {
  display: grid; grid-template-columns: var(--grid); column-gap: var(--gutter);
  padding: 0 var(--pad);
}
.block__label {
  grid-column: 1 / span 4; margin: 0; align-self: start;
  display: flex; gap: 10px;
  font-size: clamp(12px, .78vw, 15px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.block__n { color: var(--muted); font-weight: 500; }
.block__body { grid-column: 5 / -1; max-width: 1180px; }
.block__body p { margin: 0; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.55; color: #3b3b3f; max-width: 58ch; }
.block__body p + p { margin-top: 1.1em; }
/* the first paragraph reads as a statement */
.block__body p:first-child, .block__edit {
  font-size: clamp(22px, 2vw, 46px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em;
  color: var(--fg); max-width: none; text-indent: 12%;
}
.block__body p:first-child + p { margin-top: clamp(28px, 2.6vw, 56px); }

/* ---------- speed block: Lighthouse gauges on a dark card ---------- */
.blk--speed { margin-top: clamp(90px, 11vw, 280px); }
.speed {
  margin: 0 var(--pad); padding: clamp(28px, 4.4vw, 110px) clamp(20px, 5vw, 120px);
  border-radius: var(--radius); color: #f2f2ef;
  background: radial-gradient(70% 90% at 50% 0%, #1d2a24 0%, transparent 70%), #0c0d0d;
}
.speed__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.speed .block__label { color: #f2f2ef; }
.speed .block__n { color: rgba(242, 242, 239, .45); }
.speed__src { margin: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(242, 242, 239, .5); }
.speed__gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 60px); margin-top: clamp(36px, 4.6vw, 90px); }
.gauge { position: relative; display: grid; justify-items: center; text-align: center; }
.gauge svg { width: min(100%, 220px); aspect-ratio: 1; rotate: -90deg; }
.gauge__track { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 6; }
.gauge__bar {
  fill: rgba(12, 206, 107, .08); stroke: #0cce6b; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: var(--c); stroke-dashoffset: var(--c);
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1) .25s;
}
.speed.in .gauge__bar { stroke-dashoffset: calc(var(--c) * (1 - var(--v) / 100)); }
.gauge__num {
  position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; width: min(100%, 220px); margin: 0 auto;
  display: grid; place-items: center;
  font-family: var(--wide-type); font-size: clamp(30px, 3.4vw, 64px); color: #0cce6b; line-height: 1;
}
.gauge__label { margin-top: 18px; font-size: clamp(12px, .9vw, 16px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.speed__metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px clamp(16px, 3vw, 60px);
  margin: clamp(40px, 5vw, 100px) 0 0; padding-top: clamp(22px, 2vw, 36px); border-top: 1px solid rgba(255, 255, 255, .1);
}
.speed__metrics dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(242, 242, 239, .5); }
.speed__metrics dd { margin: 8px 0 0; font-family: var(--wide-type); font-size: clamp(22px, 2vw, 40px); color: #f2f2ef; }

/* ---------- more projects ---------- */
.more { padding: 0 var(--pad); margin-top: clamp(110px, 12vw, 300px); margin-bottom: clamp(90px, 10vw, 240px); }
.more__label { margin: 0 0 20px; font-size: clamp(12px, .78vw, 15px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 28px); }
/* same cards as the main page gallery: 16:10 image, uppercase title + services, round arrow */
.mcard { display: block; min-width: 0; color: var(--fg); }
.mcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: #1b1b1c; }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.mcard:hover .mcard__img img { scale: 1.05; }
.mcard__text { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 14px; }
.mcard__info { display: block; min-width: 0; padding-top: 4px; }
.mcard__title {
  display: block; font-size: clamp(14px, 1.15vw, 19px); font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcard__sub {
  display: block; margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .02em; line-height: 1.3;
  text-transform: uppercase; color: #6f6f71; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcard__go {
  flex: none; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-grid; place-items: center; font-size: 15px; transition: background .3s, color .3s, border-color .3s;
}
.mcard:hover .mcard__go { background: var(--fg); border-color: var(--fg); color: #fff; }   /* black round button on hover, same as the work cards on the home page */

/* ---------- motion ---------- */
.rv { opacity: 0; translate: 0 60px; transition: opacity 1.1s var(--ease), translate 1.3s var(--ease); }
.rv.in { opacity: 1; translate: 0 0; }
.p-hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.p-hero__title .w > span { display: inline-block; translate: 0 110%; transition: translate 1.2s var(--ease); transition-delay: calc(.3s + var(--k) * 40ms); }
body.is-ready .p-hero__title .w > span { translate: 0 0; }
.p-meta { opacity: 0; translate: 0 24px; transition: opacity 1s var(--ease) .75s, translate 1.2s var(--ease) .75s; }
body.is-ready .p-meta { opacity: 1; translate: 0 0; }
/* the first big image opens like a shutter */
.media--first .frame { clip-path: inset(18% 6% 0 6% round var(--radius)); transition: clip-path 1.6s var(--ease-io) .55s; }
.media--first .frame img { scale: calc(var(--z) * 1.3); transition: scale 2s var(--ease) .55s; }
body.is-ready .media--first .frame { clip-path: inset(0 0 0 0 round var(--radius)); }
body.is-ready .media--first .frame img { scale: calc(var(--z) * 1.1); }
/* a screenshot opening the case settles at its real size — nothing cropped */
.media--first .frame--shot img { scale: 1.15; }
body.is-ready .media--first .frame--shot img { scale: 1; }

/* ---------- tablets & phones ---------- */
@media (max-width: 1100px) {
  .p-meta__col:nth-child(1) { grid-column: 1 / span 3; }
  .p-meta__col:nth-child(2) { grid-column: 4 / span 3; }
  .p-meta__col--text { grid-column: 7 / -1 !important; }
}
@media (max-width: 820px) {

  .p-hero { padding: calc(var(--head-space) + 56px) 16px 0; }
  .p-hero__title { font-size: clamp(28px, 8.2vw, 60px); line-height: 1.02; }
  /* client + involvement side by side, overview below on its own row */
  .p-meta { grid-template-columns: 1fr 1fr; row-gap: 32px; column-gap: 16px; margin-top: 40px; font-size: 14px; }
  .p-meta__col:nth-child(1), .p-meta__col:nth-child(2) { grid-column: auto; }
  .p-meta__col--text { grid-column: 1 / -1 !important; }
  .p-meta__v + .p-meta__k { margin-top: 18px; }

  .media { padding: 0 8px; }
  .frame { --x: var(--mx, var(--dx, 50%)); --y: var(--my, var(--dy, 50%)); --z: var(--mz, var(--dz, 1)); }
  .frame--hero, .frame--wide { aspect-ratio: var(--mr, var(--dr, 4 / 3)); }
  .frame--a, .frame--b { aspect-ratio: var(--mr, var(--dr, 4 / 5)); }
  .frame--device img { aspect-ratio: var(--mr, var(--dr, 16 / 9)); }
  .frame--device { padding: 18px 3px 3px; }
  .frame--device::before { left: 9px; top: 6px; }
  /* pair keeps the offset rhythm: big left, smaller right and lower */
  .media--pair { grid-template-columns: 1fr; row-gap: 10px; }
  .frame--a { width: 84%; }
  .frame--b { grid-column: 1; width: 64%; justify-self: end; margin-top: 0; }
  /* phone tiles: one under the other, full width, so each screen stays big */
  .media--phones > .frame, .media--phones > .frame--b { width: 100%; justify-self: stretch; margin-top: 0; }
  .media--phones > .frame img { height: 88%; border-width: 4px; border-radius: 26px; }

  /* site screenshots without a chosen ratio: the whole picture, nothing cut off */
  .frame--wide.is-natural:not(.frame--video), .frame--hero.is-natural:not(.frame--video) { aspect-ratio: auto; }
  .frame--wide.is-natural:not(.frame--video) img, .frame--hero.is-natural:not(.frame--video) img { height: auto; scale: 1; translate: none; }

  .blk--image, .blk--pair { margin-top: 10px; }
  .blk--text, .blk--text + .blk { margin-top: 80px; }
  .p-hero + .blk, .p-hero + .ed-add + .blk { margin-top: 40px; }
  .block { grid-template-columns: 1fr; row-gap: 18px; padding: 0 16px; }
  .block__label, .block__body { grid-column: 1; }
  .block__body p:first-child, .block__edit { font-size: clamp(21px, 5.6vw, 30px); text-indent: 18%; }
  .block__body p { font-size: 16px; }

  /* more projects: swipe row */
  .blk--speed { margin-top: 80px; }
  .speed { margin: 0 8px; padding: 28px 18px 30px; }
  .speed__gauges, .speed__metrics { grid-template-columns: 1fr 1fr; }
  .gauge__label { margin-top: 12px; }
  .more { padding: 0; margin-top: 100px; margin-bottom: 80px; }
  .more__label { padding: 0 16px; }
  .more__grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 16px; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .more__grid::-webkit-scrollbar { display: none; }
  .mcard { flex: 0 0 82%; scroll-snap-align: start; }
  .mcard__go { width: 48px; height: 48px; }

}
@media (prefers-reduced-motion: reduce) {
  .rv, .p-hero__title .w > span, .p-meta, .media--first .frame, .media--first .frame img, .curtain {
    transition: none !important; opacity: 1; translate: none; transform: none; clip-path: none;
  }
}

/* ==========================================================
   edit mode — the page opened inside the admin (?edit=1)
   ========================================================== */
.is-edit .curtain, .is-edit .cta, .is-edit .foot, .is-edit .cookie { display: none !important; }
.is-edit [contenteditable] { outline: 1px dashed transparent; outline-offset: 6px; border-radius: 4px; transition: outline-color .2s; cursor: text; }
.is-edit [contenteditable]:hover { outline-color: rgba(255, 74, 36, .5); }
.is-edit [contenteditable]:focus { outline: 2px solid var(--accent); }
.is-edit .block__edit { white-space: pre-wrap; text-indent: 0; }
.blk { position: relative; }
.is-edit .blk { padding-bottom: 1px; }
.ed-bar {
  position: absolute; top: -40px; right: 8px; z-index: 5; display: flex; gap: 4px; align-items: center;
  padding: 4px; border-radius: 10px; background: #111; color: #fff; opacity: 0; transition: opacity .2s;
  font: 600 12px var(--sans);
}
.blk:hover > .ed-bar, .ed-bar:focus-within { opacity: 1; }
.ed-bar button, .ed-bar select, .ed-chk {
  height: 28px; min-width: 28px; padding: 0 8px; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .1); color: #fff; font: inherit; cursor: pointer;
}
.ed-bar select option { color: #111; }
.ed-chk { display: inline-flex; align-items: center; gap: 6px; }
.ed-bar .ed-del:hover { background: #c4321b; }
.ed-add { display: flex; justify-content: center; gap: 6px; margin: 18px auto 0; opacity: .35; transition: opacity .2s; }
.ed-add:hover { opacity: 1; }
.ed-add button {
  height: 30px; padding: 0 12px; border: 1px dashed #aaa; border-radius: 999px; background: transparent;
  font: 600 12px var(--sans); color: #444; cursor: pointer;
}
.ed-add button:hover { border-style: solid; border-color: var(--accent); color: var(--accent); }
.ed-fig { position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transition: opacity .2s; }
.frame:hover .ed-fig { opacity: 1; }
.frame.is-cropping .ed-fig { display: none; }
.ed-fig button {
  height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(17, 17, 17, .85); color: #fff;
  font: 600 12px var(--sans); cursor: pointer; backdrop-filter: blur(6px);
}
.ed-fig button em { font-style: normal; color: var(--accent); margin-left: 4px; }
.frame.is-cropping { cursor: grab; outline: 3px solid var(--accent); outline-offset: 3px; touch-action: none; }
.frame.is-cropping:active { cursor: grabbing; }
.frame.is-cropping img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ed-crop {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  width: max-content; max-width: calc(100% - 16px); padding: 10px 12px; border-radius: 12px;
  background: rgba(17, 17, 17, .92); color: #fff; font: 500 12px var(--sans); cursor: default;
}
.ed-crop b { color: var(--accent); }
.ed-crop__hint { color: rgba(255, 255, 255, .55); }
.ed-crop label { display: inline-flex; align-items: center; gap: 8px; }
.ed-crop input[type=range] { width: 110px; accent-color: var(--accent); }
.ed-crop select, .ed-crop button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; cursor: pointer; }
.ed-crop select option { color: #111; }
.ed-crop .ed-crop__done { background: var(--accent); font-weight: 700; }
.ed-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 9999; translate: -50% 20px; opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 10px; background: #111; color: #fff; font: 600 13px var(--sans); transition: .3s;
}
.ed-toast.is-on { opacity: 1; translate: -50% 0; }
.ed-toast.is-err { background: #c4321b; }
@media (hover: none) { .ed-bar, .ed-fig, .ed-add { opacity: 1; } }