/* ============================================================
   KEÑ studio — main page
   Block 1: Hero
   ============================================================ */

/* ---- fonts ---- */
@font-face {
  font-family: "Atyp Display";
  src: url("assets/fonts/AtypDisplay-Thin.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("assets/fonts/AtypDisplay-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("assets/fonts/AtypDisplay-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("assets/fonts/AtypDisplay-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("assets/fonts/AtypDisplay-Semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("assets/fonts/AtypDisplay-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MADE TheArtist Script";
  src: url("assets/fonts/MADE-TheArtist-Script.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --c-ink:   #111111;
  --c-bg:    #ffffff;
  --c-muted: #6b6b6b;
  --c-rule:  #9a9a9a;

  --max:     1620px;
  --side:    clamp(20px, 2.4vw, 46px);

  --ff: "Atyp Display", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-script: "MADE TheArtist Script", "Brush Script MT", cursive;

  /* dashed pattern — calibrated to PDF */
  --dash-len:  14px;
  --dash-gap:  7px;
  --dash-thick: 1.5px;
  --dash-color: #1a1a1a;
}

* { box-sizing: border-box; }

/* ============================================================
   SCROLL REVEAL — base (anti-FOUC: only when html.js-on)
   ============================================================ */
.js-on [data-reveal] {
  opacity: 0;
  transform: translateY(80px);
  filter: blur(6px);
  transition: opacity 2s cubic-bezier(.16,1,.3,1), transform 2s cubic-bezier(.16,1,.3,1), filter 1.4s ease;
  will-change: opacity, transform, filter;
}
.js-on [data-reveal="left"]   { transform: translateX(-100px); }
.js-on [data-reveal="right"]  { transform: translateX(100px); }
.js-on [data-reveal="zoom"]   { transform: scale(0.88); }
.js-on [data-reveal="fade"]   { transform: none; }

.js-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.js-on [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(70px) scale(0.96);
  filter: blur(4px);
  transition: opacity 1.8s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.2s ease;
}
.js-on [data-reveal-group].is-in > * { opacity: 1; transform: none; filter: blur(0); }
.js-on [data-reveal-group].is-in > *:nth-child(1) { transition-delay: .1s; }
.js-on [data-reveal-group].is-in > *:nth-child(2) { transition-delay: .25s; }
.js-on [data-reveal-group].is-in > *:nth-child(3) { transition-delay: .4s; }
.js-on [data-reveal-group].is-in > *:nth-child(4) { transition-delay: .55s; }
.js-on [data-reveal-group].is-in > *:nth-child(5) { transition-delay: .7s; }
.js-on [data-reveal-group].is-in > *:nth-child(6) { transition-delay: .85s; }

/* ============================================================
   PREMIUM BLOCK ANIMATIONS — menu-quality micro-interactions
   ============================================================ */

/* HERO brand — letter-by-letter reveal */
.js-on .hero__brand {
  overflow: hidden;
  display: block;
}
.js-on .hero__brand .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.8s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.js-on .hero__brand.is-in .char {
  transform: translateY(0);
  opacity: 1;
}

/* HERO info row — line draw + cols stagger */
.js-on .hero__info {
  position: relative;
}
.js-on .hero__info::before,
.js-on .hero__info::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s cubic-bezier(.83,0,.17,1) .4s;
}
.js-on .hero__info.is-in::before,
.js-on .hero__info.is-in::after {
  transform: scaleX(1);
}
.js-on .hero__info .dash-v {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 1.6s cubic-bezier(.83,0,.17,1) .6s;
}
.js-on .hero__info.is-in .dash-v { transform: scaleY(1); }
.js-on .hero__info .hero__info-col {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.16,1,.3,1);
}
.js-on .hero__info.is-in .hero__info-col { opacity: 1; transform: none; }
.js-on .hero__info.is-in .hero__info-col:nth-child(1) { transition-delay: .55s; }
.js-on .hero__info.is-in .hero__info-col:nth-child(3) { transition-delay: .75s; }
.js-on .hero__info.is-in .hero__info-col:nth-child(5) { transition-delay: .95s; }

/* HERO photo — clip-path slide reveal + zoom */
.js-on .hero__photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.2s cubic-bezier(.83,0,.17,1) .3s;
}
.js-on .hero__photo.is-in { clip-path: inset(0 0 0 0); }
.js-on .hero__photo img {
  transform: scale(1.12);
  transition: transform 3s cubic-bezier(.2,.6,.2,1) .3s;
}
.js-on .hero__photo.is-in img { transform: scale(1); }

/* ABOUT title — char reveal */
.js-on .about__title {
  overflow: hidden;
  display: inline-block;
}
.js-on .about__title .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), opacity .9s ease;
}
.js-on .about__head.is-in .about__title .char {
  transform: translateY(0);
  opacity: 1;
}

.js-on .about__chip {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 1.5s cubic-bezier(.83,0,.17,1) .6s;
}
.js-on .about__head.is-in .about__chip { transform: scaleX(1); }

/* ABOUT grid cards — staggered slide-up with hover lift */
.js-on .about__grid > * {
  opacity: 0;
  transform: translateY(80px) scale(0.94);
  filter: blur(6px);
  transition: opacity 1.9s cubic-bezier(.16,1,.3,1), transform 1.9s cubic-bezier(.16,1,.3,1), filter 1.3s ease;
}
.js-on .about__grid.is-in > * { opacity: 1; transform: none; filter: blur(0); }
.js-on .about__grid.is-in > *:nth-child(1) { transition-delay: .1s; }
.js-on .about__grid.is-in > *:nth-child(2) { transition-delay: .25s; }
.js-on .about__grid.is-in > *:nth-child(3) { transition-delay: .4s; }
.js-on .about__grid.is-in > *:nth-child(4) { transition-delay: .55s; }
.js-on .about__grid.is-in > *:nth-child(5) { transition-delay: .7s; }
.js-on .about__grid.is-in > *:nth-child(6) { transition-delay: .85s; }

.about__photo,
.about__card {
  overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.about__photo img {
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.about__photo:hover img { transform: scale(1.06); }
.about__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px -28px rgba(0,0,0,0.35);
}
.about__card-chip {
  transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .25s ease;
}
.about__card:hover .about__card-chip {
  transform: translateX(6px);
}

/* ABOUT landscape — masked reveal + cinematic zoom */
.js-on .about__landscape {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.4s cubic-bezier(.83,0,.17,1);
}
.js-on .about__landscape.is-in { clip-path: inset(0); }
.js-on .about__landscape img {
  transform: scale(1.12);
  transition: transform 3.6s cubic-bezier(.2,.6,.2,1);
}
.js-on .about__landscape.is-in img { transform: scale(1); }

/* ABOUT quote — gold rule grow */
.js-on .about__quote-rule {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 1s cubic-bezier(.83,0,.17,1) .3s;
}
.js-on .about__quote.is-in .about__quote-rule { transform: scaleY(1); }

/* LEMBAGA — slide-in from left with rotate on logo */
.js-on .lembaga__logo {
  transform: translateX(-40px) rotate(-4deg);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), opacity 1.2s ease;
}
.js-on .lembaga__row.is-in .lembaga__logo { transform: none; opacity: 1; }
.js-on .lembaga__text {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s ease .3s, transform 1.4s cubic-bezier(.16,1,.3,1) .3s;
}
.js-on .lembaga__row.is-in .lembaga__text { opacity: 1; transform: none; }
.js-on .lembaga__chip {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1.2s ease .65s, transform 1.2s cubic-bezier(.5,1.5,.5,1) .65s;
}
.js-on .lembaga__row.is-in .lembaga__chip { opacity: 1; transform: scale(1); }

/* TEAM photo — cinematic clip-path bottom + slow zoom */
.js-on .team__photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.6s cubic-bezier(.83,0,.17,1);
}
.js-on .team__photo.is-in { clip-path: inset(0); }
.js-on .team__photo img {
  transform: scale(1.15);
  transition: transform 3.6s cubic-bezier(.2,.6,.2,1);
}
.js-on .team__photo.is-in img { transform: scale(1); }

/* CONTACTS — panel slide + map drop + inner sequence */
.js-on .contacts__panel {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.js-on .contacts.is-in .contacts__panel { opacity: 1; transform: none; }
.js-on .contacts__title {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.3s ease .4s, transform 1.3s cubic-bezier(.16,1,.3,1) .4s;
}
.js-on .contacts.is-in .contacts__title { opacity: 1; transform: none; }
.js-on .contacts__rule {
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 1.3s cubic-bezier(.83,0,.17,1) .65s;
}
.js-on .contacts.is-in .contacts__rule { transform: scaleY(1); }
.js-on .contacts__phone {
  display: inline-block;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 1.2s ease .85s, transform 1.2s cubic-bezier(.16,1,.3,1) .85s, color .3s ease;
}
.js-on .contacts.is-in .contacts__phone { opacity: 1; transform: none; }
.js-on .contacts__addr {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 1.2s ease 1.05s, transform 1.2s cubic-bezier(.16,1,.3,1) 1.05s;
}
.js-on .contacts.is-in .contacts__addr { opacity: 1; transform: none; }
.js-on .contacts__map {
  opacity: 0;
  transform: translateX(50px) scale(0.94);
  transition: opacity 1.6s ease .4s, transform 1.6s cubic-bezier(.16,1,.3,1) .4s;
}
.js-on .contacts.is-in .contacts__map { opacity: 1; transform: none; }
.contacts__phone { transition: color .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.contacts__phone:hover { color: #daa864; transform: translateX(4px); }
.contacts__map img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.contacts__map:hover img { transform: scale(1.04); }

/* FOOTER — dashed rule draw + items slide */
.js-on .footer::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s cubic-bezier(.83,0,.17,1);
}
.js-on .footer.is-in::before { transform: scaleX(1); }
.js-on .footer__social { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease .4s, transform 1.2s cubic-bezier(.16,1,.3,1) .4s; }
.js-on .footer__nav { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease .6s, transform 1.2s cubic-bezier(.16,1,.3,1) .6s; }
.js-on .footer.is-in .footer__social,
.js-on .footer.is-in .footer__nav { opacity: 1; transform: none; }

.footer__social img,
.footer__social svg { transition: transform .35s cubic-bezier(.16,1,.3,1), color .25s ease, opacity .25s ease; }
.footer__social a { color: var(--c-ink); }
.footer__social a:hover img { transform: translateY(-3px) scale(1.08); }
.footer__social a:hover svg { transform: translateY(-3px); color: #daa864; }
.footer__nav a { position: relative; }
.footer__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: #daa864;
  transition: right .35s cubic-bezier(.16,1,.3,1);
}
.footer__nav a:hover::after { right: 0; }

/* FINAL block — internal items reveal in waterfall */
.js-on .final__brand { opacity: 0; transform: translateY(40px); transition: opacity 1.8s ease .2s, transform 1.8s cubic-bezier(.16,1,.3,1) .2s; }
.js-on .final__info { opacity: 0; transform: translateY(30px); transition: opacity 1.6s ease .65s, transform 1.6s cubic-bezier(.16,1,.3,1) .65s; }
.js-on .final__menu a {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.js-on .final__foot { opacity: 0; transform: translateY(30px); transition: opacity 1.4s ease 2s, transform 1.4s cubic-bezier(.16,1,.3,1) 2s; }
.js-on .final.is-in .final__brand,
.js-on .final.is-in .final__info,
.js-on .final.is-in .final__foot { opacity: 1; transform: none; }
.js-on .final.is-in .final__menu a { opacity: 1; transform: none; }
.js-on .final.is-in .final__menu a:nth-child(1) { transition-delay: 1.1s; }
.js-on .final.is-in .final__menu a:nth-child(2) { transition-delay: 1.3s; }
.js-on .final.is-in .final__menu a:nth-child(3) { transition-delay: 1.5s; }
.js-on .final.is-in .final__menu a:nth-child(4) { transition-delay: 1.7s; }

/* HERO icon-btn hover */
.icon-btn { transition: border-color .3s ease, color .3s ease, background .3s ease; }
.icon-btn:hover { background: #111; color: #fff; }
.icon-btn[aria-label="Menu"]:hover { background: #111; }

/* logo hover */
.logo { transition: opacity .3s ease; }
.logo:hover { opacity: 0.7; }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: .15s; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: .25s; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: .35s; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: .45s; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: calc(clamp(16px, 1.6vw, 26px) + clamp(48px, 3.6vw, 64px)) var(--side) 0;
}

/* ---- top bar (sticky on scroll) ---- */
.hero__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(7px, 0.7vw, 10px) var(--side);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
}
/* плашку — поуже */
.hero__bar { padding: clamp(4px, 0.45vw, 7px) var(--side); }
.hero__bar.is-scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,0,0,0.06);
  padding-top: clamp(4px, 0.45vw, 7px);
  padding-bottom: clamp(4px, 0.45vw, 7px);
}
body.menu-open .hero__bar { background: transparent; backdrop-filter: none; border-color: transparent; }

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--c-ink);
  text-decoration: none;
  line-height: 1;
  width: max-content;
}
.logo { gap: 3px; }
.logo__mark { width: 34px; height: 27px; color: var(--c-ink); }
.logo__word {
  font-family: var(--ff);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: 0.05em;
}
.logo__rule { width: 100%; height: 1px; background: var(--c-ink); }
.logo__sub {
  font-family: var(--ff);
  font-weight: 300;
  font-size: 7.5px;
  letter-spacing: 0.5em;
  text-transform: lowercase;
  padding-left: 0.5em;
}

.hero__nav {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  position: relative;
}

/* ============================================================
   SEARCH OVERLAY — fullscreen DARK premium
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.83,0,.17,1), opacity .35s ease;
  overflow: hidden;
  color: var(--c-ink);
}
.search-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 25%, rgba(218,168,100,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.search-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.83,0,.17,1), opacity .5s ease .35s, visibility 0s linear 1s;
  pointer-events: none;
}
/* on close — inner elements gracefully reverse without their open-delays */
.search-overlay[aria-hidden="true"] .search-overlay__watermark,
.search-overlay[aria-hidden="true"] .search-overlay__eye,
.search-overlay[aria-hidden="true"] .search-overlay__close,
.search-overlay[aria-hidden="true"] .search-overlay__icon,
.search-overlay[aria-hidden="true"] .search-overlay__input,
.search-overlay[aria-hidden="true"] .search-overlay__rule::after,
.search-overlay[aria-hidden="true"] .search-overlay__label,
.search-overlay[aria-hidden="true"] .search-overlay__list a,
.search-overlay[aria-hidden="true"] .search-overlay__foot {
  transition: opacity .45s ease, transform .65s cubic-bezier(.83,0,.17,1);
  transition-delay: 0s !important;
}

/* huge watermark K letter on right edge */
.search-overlay__watermark {
  position: absolute;
  right: -6vw;
  bottom: -12vw;
  font-family: var(--ff);
  font-weight: 200;
  font-size: clamp(380px, 50vw, 720px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(218,168,100,0.22);
  pointer-events: none;
  z-index: 1;
  user-select: none;
  transform: translateY(40px) rotate(-4deg);
  opacity: 0;
  transition: opacity 1.4s ease .3s, transform 1.6s cubic-bezier(.16,1,.3,1) .3s;
}
.search-overlay[aria-hidden="false"] .search-overlay__watermark {
  opacity: 1;
  transform: none;
}

/* fixed close — always top-right of overlay */
.search-overlay__close {
  position: fixed;
  top: clamp(18px, 1.6vw, 28px);
  right: clamp(18px, 1.6vw, 28px);
  z-index: 3;
  width: clamp(34px, 2.3vw, 42px);
  height: clamp(34px, 2.3vw, 42px);
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
  transition: border-color .3s ease, color .3s ease, transform .7s cubic-bezier(.16,1,.3,1) .35s, opacity .5s ease .35s, background .3s ease;
}
.search-overlay__close svg { width: 14px; height: 14px; }
.search-overlay[aria-hidden="false"] .search-overlay__close { opacity: 1; transform: rotate(0) scale(1); }
.search-overlay__close:hover {
  background: var(--c-ink);
  color: #fff;
  transform: rotate(90deg) scale(1);
}

.search-overlay__inner {
  position: relative;
  z-index: 2;
  width: min(760px, 92vw);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 24px);
  padding: clamp(18px, 2vw, 32px);
  color: var(--c-ink);
}

.search-overlay__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.search-overlay__eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .7s ease .25s, transform .7s cubic-bezier(.16,1,.3,1) .25s;
}
.search-overlay__eye-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #daa864;
  box-shadow: 0 0 14px rgba(218,168,100,0.7);
  animation: searchDot 1.6s ease-in-out infinite;
}
@keyframes searchDot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}
.search-overlay[aria-hidden="false"] .search-overlay__eye { opacity: 1; transform: none; }

.search-overlay__form {
  position: relative;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}
.search-overlay__icon {
  color: #daa864;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .6s ease .4s, transform .6s cubic-bezier(.16,1,.3,1) .4s;
  width: clamp(18px, 1.4vw, 22px);
  height: auto;
  flex-shrink: 0;
}
.search-overlay[aria-hidden="false"] .search-overlay__icon { opacity: 1; transform: none; }
.search-overlay__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ff);
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  line-height: 1.1;
  padding: clamp(10px, 1.2vw, 18px) 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s ease .45s, transform 1s cubic-bezier(.16,1,.3,1) .45s;
  caret-color: #daa864;
}
.search-overlay__input::placeholder {
  color: rgba(0,0,0,0.28);
  font-style: italic;
  font-weight: 300;
}
.search-overlay[aria-hidden="false"] .search-overlay__input { opacity: 1; transform: none; }
.search-overlay__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.search-overlay__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #daa864;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.83,0,.17,1) .45s;
}
.search-overlay[aria-hidden="false"] .search-overlay__rule::after { transform: scaleX(1); }

.search-overlay__suggest {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 14px);
}
.search-overlay__label {
  font-family: var(--ff);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #daa864;
  opacity: 0;
  transition: opacity .5s ease .7s;
}
.search-overlay[aria-hidden="false"] .search-overlay__label { opacity: 1; }
.search-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.search-overlay__list li {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.search-overlay__list li:first-child { border-top: 1px solid rgba(0,0,0,0.06); }
.search-overlay__list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(8px, 0.9vw, 14px) clamp(4px, 0.4vw, 8px);
  color: rgba(0,0,0,0.78);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), color .3s ease, background .3s ease;
}
.search-overlay[aria-hidden="false"] .search-overlay__list a { opacity: 1; transform: none; }
.search-overlay[aria-hidden="false"] .search-overlay__list li:nth-child(1) a { transition-delay: .75s; }
.search-overlay[aria-hidden="false"] .search-overlay__list li:nth-child(2) a { transition-delay: .82s; }
.search-overlay[aria-hidden="false"] .search-overlay__list li:nth-child(3) a { transition-delay: .89s; }
.search-overlay[aria-hidden="false"] .search-overlay__list li:nth-child(4) a { transition-delay: .96s; }
.search-overlay__list a:hover {
  color: var(--c-ink);
  background: linear-gradient(90deg, rgba(218,168,100,0.08), transparent);
}
.search-overlay__list-num {
  font-family: var(--ff);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(0,0,0,0.35);
  transition: color .3s ease, letter-spacing .3s ease;
}
.search-overlay__list a:hover .search-overlay__list-num {
  color: #daa864;
  letter-spacing: 0.45em;
}
.search-overlay__list-txt {
  font-family: var(--ff);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 400;
  letter-spacing: 0.005em;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.search-overlay__list a:hover .search-overlay__list-txt { transform: translateX(6px); }
.search-overlay__list-arr {
  font-family: var(--ff);
  font-size: clamp(12px, 1vw, 16px);
  color: rgba(0,0,0,0.3);
  transition: color .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.search-overlay__list a:hover .search-overlay__list-arr {
  color: #daa864;
  transform: translate(5px, -5px);
}

.search-overlay__foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 26px);
  font-family: var(--ff);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.5);
  padding-top: clamp(10px, 1vw, 16px);
  border-top: 1px solid rgba(0,0,0,0.08);
  opacity: 0;
  transition: opacity .7s ease 1.1s;
}
.search-overlay[aria-hidden="false"] .search-overlay__foot { opacity: 1; }
.search-overlay__foot kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 3px;
  margin-right: 5px;
  font-family: var(--ff);
  font-size: 10px;
  font-weight: 400;
  color: var(--c-ink);
  background: rgba(0,0,0,0.02);
}

@media (max-width: 720px) {
  .search-overlay__watermark { display: none; }
  .search-overlay__icon { display: none; }
  .search-overlay__foot { flex-wrap: wrap; gap: 12px; }
}

/* icon morph: lens -> X when open */
.icon-btn--search svg line,
.icon-btn--search svg circle {
  transition: opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1);
  transform-origin: center;
}
body.search-open .icon-btn--search .ic-search-c { opacity: 0; transform: scale(0); }
body.search-open .icon-btn--search .ic-search-l { opacity: 0; }
body.search-open .icon-btn--search .ic-search-x1,
body.search-open .icon-btn--search .ic-search-x2 { opacity: 1; }
.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-ink);
}
.icon-btn {
  width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
}
.icon-btn + .icon-btn { margin-left: -1px; }
.icon-btn[aria-label="Menu"] { border-left: 0; }

/* ---- big brand ---- */
.hero__brand {
  margin: clamp(24px, 3.4vw, 52px) 0 clamp(20px, 2.4vw, 40px);
  text-align: center;
  font-family: var(--ff);
  font-weight: 400;
  font-size: clamp(44px, 7.6vw, 132px);
  letter-spacing: 0.005em;
  line-height: 1;
}

/* ---- info row ---- */
.hero__info {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  padding: 22px 0;
  position: relative;
}
.hero__info::before,
.hero__info::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--dash-thick);
  background-image: repeating-linear-gradient(
    to right,
    var(--dash-color) 0,
    var(--dash-color) var(--dash-len),
    transparent var(--dash-len),
    transparent calc(var(--dash-len) + var(--dash-gap))
  );
}
.hero__info::before { top: 0; }
.hero__info::after  { bottom: 0; }

.dash-v {
  width: var(--dash-thick);
  align-self: stretch;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--dash-color) 0,
    var(--dash-color) var(--dash-len),
    transparent var(--dash-len),
    transparent calc(var(--dash-len) + var(--dash-gap))
  );
}

.hero__info-col {
  padding: 4px clamp(24px, 3vw, 60px);
}

.hero__info-title {
  margin: 0 0 10px;
  font-family: var(--ff);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.hero__info-text {
  margin: 0;
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #2b2b2b;
}

/* ---- photo ---- */
.hero__photo {
  margin: clamp(20px, 2.2vw, 36px) 0 0;
}
.hero__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   BLOCK 2 — ABOUT US
   ============================================================ */
.about {
  padding: clamp(40px, 5vw, 90px) var(--side) 0;
}

.about__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(18px, 2vw, 30px);
}
.about__title {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(34px, 3.4vw, 64px);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.about__chip {
  width: clamp(120px, 10vw, 175px);
  height: clamp(34px, 2.6vw, 48px);
  background: url("assets/gold-rect.png") center/cover no-repeat, #daa864;
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.about__grid > * { min-height: 0; }
/* lock all 6 cells to identical aspect — cards then stretch */
.about__grid .about__photo,
.about__grid .about__card {
  aspect-ratio: 1 / 1.05;
  height: auto;
  max-height: none;
}
.about__grid .about__card {
  overflow: hidden;
}

.about__photo {
  margin: 0;
  overflow: hidden;
  background: #ececec;
}
.about__photo picture { display: block; width: 100%; height: 100%; }
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__card {
  background: #ececec;
  padding: clamp(20px, 2.2vw, 40px) clamp(22px, 2.4vw, 42px) clamp(24px, 2.6vw, 44px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.about__card-title {
  margin: 0 0 clamp(18px, 2vw, 34px);
  font-family: var(--ff-script);
  font-weight: 400;
  font-size: clamp(64px, 8.1vw, 140px);
  line-height: 0.9;
  color: #111;
}
.about__card-text {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: #1a1a1a;
}
.about__card-rule {
  margin-top: auto;
  padding-top: clamp(14px, 2vw, 28px);
  height: 1px;
  border-top: 1px solid #daa864;
}
.about__card-chip {
  position: absolute;
  right: clamp(22px, 2.4vw, 42px);
  bottom: clamp(20px, 2.2vw, 38px);
  min-width: clamp(80px, 7vw, 120px);
  height: clamp(28px, 2.4vw, 40px);
  padding: 0 clamp(14px, 1.2vw, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: url("assets/gold-rect.png") center/cover no-repeat, #daa864;
  color: #fff;
  font-family: var(--ff);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: min-width .55s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, color .25s ease;
}
/* gold sheen layer */
.about__card-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .85s cubic-bezier(.83,0,.17,1);
  z-index: -1;
}
.about__card-chip:hover {
  min-width: clamp(110px, 9vw, 150px);
  box-shadow: 0 10px 26px -10px rgba(218,168,100,0.55);
}
.about__card-chip:hover::before { transform: translateX(120%); }
.about__card-chip-txt {
  display: inline-block;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.about__card-chip:hover .about__card-chip-txt { transform: translateX(-2px); }
.about__card-chip-arr {
  display: inline-flex;
  align-items: center;
  color: #fff;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.about__card-chip:hover .about__card-chip-arr { transform: translateX(6px); }
.about__card-chip:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* ---- KEÑ derives quote ---- */
.about__quote {
  display: grid;
  grid-template-columns: 1fr auto 2.2fr;
  gap: clamp(28px, 3vw, 60px);
  align-items: start;
  padding: clamp(36px, 4vw, 70px) 0 clamp(28px, 3vw, 50px);
  margin: 0 auto;
  max-width: calc(100% - clamp(0px, 2vw, 60px));
}
.about__quote-col {
  margin: 0;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}
.about__quote-rule {
  display: block;
  width: 1px;
  align-self: stretch;
  background: #daa864;
}

/* ============================================================
   BLOCK 3 — LEMBAGA accreditation
   ============================================================ */
.lembaga {
  padding: clamp(30px, 3.4vw, 64px) var(--side) clamp(20px, 2.4vw, 40px);
}
.lembaga__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(20px, 2.6vw, 56px);
  padding-left: clamp(40px, 5vw, 100px);
}
.lembaga__logo {
  width: clamp(60px, 4.6vw, 76px);
  height: auto;
  display: block;
  flex-shrink: 0;
}
.lembaga__text {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(15px, 1.35vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  color: #1a1a1a;
  max-width: 1000px;
}
.lembaga__chip {
  width: clamp(120px, 9vw, 150px);
  height: clamp(110px, 8.4vw, 140px);
  background: url("assets/gold-rect.png") center/cover no-repeat, #daa864;
}

/* ============================================================
   BLOCK 4 — TEAM PHOTO (full-width)
   ============================================================ */
.team {
  padding: clamp(20px, 2.4vw, 40px) var(--side) 0;
}
.team__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 1800 / 1200;
  overflow: hidden;
}
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ============================================================
   BLOCK 5 — CONTACTS panel
   ============================================================ */
.contacts {
  padding: clamp(18px, 2.2vw, 36px) var(--side) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(12px, 1.2vw, 22px);
  align-items: stretch;
}
.contacts__panel {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(20px, 2.6vw, 56px);
  background: #0e0e0e;
  color: #fff;
  padding: clamp(22px, 2.4vw, 40px) clamp(28px, 3.2vw, 60px);
  min-height: clamp(140px, 11vw, 200px);
}
.contacts__title {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(22px, 1.9vw, 32px);
  font-weight: 500;
  letter-spacing: 0.22em;
}
.contacts__rule {
  width: 1px;
  height: clamp(48px, 4vw, 70px);
  background: rgba(255,255,255,0.5);
  align-self: end;
  margin-bottom: clamp(8px, 1vw, 18px);
}
.contacts__body {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  text-align: left;
  align-self: center;
  justify-self: start;
  padding-left: clamp(20px, 3vw, 60px);
}
.contacts__phone {
  color: #fff;
  text-decoration: none;
  font-family: var(--ff);
  font-size: clamp(18px, 1.55vw, 26px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.contacts__addr {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(12px, 1.55vw, 28px);
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.contacts__map {
  display: block;
  line-height: 0;
  width: clamp(200px, 15.5vw, 280px);
}
.contacts__map img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: clamp(30px, 3vw, 56px) var(--side) clamp(30px, 3vw, 56px);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  left: var(--side);
  right: var(--side);
  top: clamp(10px, 1vw, 18px);
  height: 3px;
  background-image: repeating-linear-gradient(
    to right,
    #1a1a1a 0,
    #1a1a1a 24px,
    transparent 24px,
    transparent 36px
  );
}
.footer__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 3vw, 60px);
  padding-top: clamp(28px, 2.6vw, 50px);
}
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 22px);
}
.footer__social a { display: inline-flex; line-height: 0; }
.footer__social img,
.footer__social svg {
  width: clamp(20px, 1.5vw, 24px);
  height: auto;
  display: block;
}
.footer__nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(26px, 3.2vw, 62px);
}
.footer__nav a {
  color: #111;
  text-decoration: none;
  font-family: var(--ff);
  font-size: clamp(15px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.footer__nav a:hover { color: #6b6b6b; }

/* ============================================================
   BLOCK 8 — FINAL CTA (page 2 of PDF, dark hero)
   ============================================================ */
.final {
  width: 100%;
  margin-top: clamp(40px, 5vw, 90px);
  background: #fff;
}

/* ---- TOP HALF (white, like page 1 hero) ---- */
.final__head {
  padding: clamp(24px, 2.4vw, 44px) var(--side) clamp(20px, 2vw, 36px);
  background: #fff;
  color: var(--c-ink);
}
.final__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.final__nav {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
}
.final__nav .lang { font-size: 14px; }
.final__search {
  width: clamp(54px, 4vw, 76px);
  height: clamp(22px, 1.8vw, 30px);
  border: 1px solid var(--c-ink);
  display: inline-block;
  background: transparent;
  transition: border-color .3s ease, background .3s ease;
}
.final__search:hover { background: var(--c-ink); }
.final__close {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  cursor: pointer;
  transition: color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.final__close:hover { color: #daa864; transform: rotate(90deg); }

.final__brand {
  margin: clamp(36px, 5.4vw, 86px) 0 clamp(22px, 2.4vw, 40px);
  text-align: center;
  font-family: var(--ff);
  font-weight: 400;
  font-size: clamp(44px, 7.6vw, 132px);
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--c-ink);
}

.final__info {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  padding: clamp(20px, 2.2vw, 30px) 0;
  position: relative;
}
.final__info::before,
.final__info::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--dash-thick);
  background-image: repeating-linear-gradient(
    to right,
    var(--dash-color) 0,
    var(--dash-color) var(--dash-len),
    transparent var(--dash-len),
    transparent calc(var(--dash-len) + var(--dash-gap))
  );
}
.final__info::before { top: 0; }
.final__info::after  { bottom: 0; }
.final__info-col {
  padding: 4px clamp(20px, 2.6vw, 50px);
}
.final__info-title {
  margin: 0 0 10px;
  font-family: var(--ff);
  font-size: clamp(20px, 1.85vw, 32px);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--c-ink);
}
.final__info-text {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  color: #2b2b2b;
}
.final__info-rule {
  width: var(--dash-thick);
  align-self: stretch;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--dash-color) 0,
    var(--dash-color) var(--dash-len),
    transparent var(--dash-len),
    transparent calc(var(--dash-len) + var(--dash-gap))
  );
}

/* ---- BOTTOM HALF (dark, building as backdrop, very dim) ---- */
.final__dark {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 44vw, 720px);
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
}
.final__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.22) grayscale(0.4) contrast(1.1);
  z-index: 0;
  transform: scale(1.06);
  transition: transform 3s cubic-bezier(.2,.6,.2,1);
}
.final.is-in .final__bg { transform: scale(1); }
.final__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

.final__menu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 22px);
  padding: clamp(90px, 10vw, 180px) var(--side) clamp(40px, 5vw, 90px);
}
.final__menu a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 36px);
  letter-spacing: 0.005em;
  line-height: 1.2;
  padding: 4px 14px;
  transition: color .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.final__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 1px;
  background: #daa864;
  transition: left .4s cubic-bezier(.16,1,.3,1), right .4s cubic-bezier(.16,1,.3,1);
}
.final__menu a:hover { color: #f1d8a6; transform: translateY(-2px); }
.final__menu a:hover::after { left: 18%; right: 18%; }

.final__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--side) clamp(24px, 2.6vw, 50px);
}
.final__social {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
}
.final__social a { display: inline-flex; line-height: 0; }
.final__social img {
  width: clamp(22px, 1.7vw, 30px);
  height: auto;
  opacity: 0.92;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.final__social a:hover img { opacity: 1; transform: translateY(-3px); }
.final__lam {
  width: clamp(70px, 5vw, 96px);
  height: auto;
  display: block;
  filter: brightness(1.1);
}

@media (max-width: 720px) {
  .final__info { grid-template-columns: 1fr; gap: 14px; }
  .final__info-rule { display: none; }
  .final__foot { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* ============================================================
   MENU PANEL — right-side slide-in (half-screen)
   ============================================================ */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,8,8,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  z-index: 998;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
body.menu-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s linear 0s;
}

.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: #0e0e0e;
  color: #fff;
  z-index: 1000;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .8s cubic-bezier(.83,0,.17,1);
  box-shadow: none;
}
.menu-panel[aria-hidden="false"] {
  transform: translateX(0);
}
.menu-panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.32) grayscale(0.3) contrast(1.05);
  opacity: 0.7;
  transform: scale(1.12);
  transition: transform 2.6s cubic-bezier(.2,.6,.2,1);
  z-index: 0;
}
.menu-panel[aria-hidden="false"] .menu-panel__bg {
  transform: scale(1.02);
}
.menu-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}
.menu-panel__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(28px, 3vw, 56px) clamp(32px, 4vw, 96px);
}

/* full-screen two-column center */
.menu-panel__center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 120px);
  align-items: center;
  min-height: 0;
}
@media (max-width: 900px) {
  .menu-panel__center { grid-template-columns: 1fr; align-items: start; }
}

/* submenu column — both subs stack into right grid cell; only active one shows */
.menu-panel__sub {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: clamp(20px, 2.6vw, 50px);
  align-self: center;
}
.menu-panel__nav {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
.menu-panel[data-active="services"] .menu-panel__sub[data-sub="services"],
.menu-panel[data-active="projects"] .menu-panel__sub[data-sub="projects"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.menu-panel__sub-eyebrow {
  font-family: var(--ff);
  font-size: clamp(10px, 0.7vw, 12px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #daa864;
  display: block;
  margin-bottom: clamp(20px, 2vw, 32px);
}
.menu-panel__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 16px);
}
.menu-panel__sub-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: clamp(12px, 1.2vw, 22px);
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 22px);
  letter-spacing: 0.005em;
  padding: clamp(8px, 0.9vw, 14px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color .25s ease, border-color .25s ease, padding-left .35s cubic-bezier(.16,1,.3,1);
}
.menu-panel__sub-list a:hover {
  color: #daa864;
  border-color: rgba(218,168,100,0.45);
  padding-left: 10px;
}
.menu-panel__sub-list a small {
  font-size: clamp(9px, 0.62vw, 11px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.menu-panel__sub-list a:hover small { color: #daa864; }

@media (max-width: 900px) {
  .menu-panel__sub {
    border-left: 0;
    padding-left: 0;
    margin-top: 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease, opacity .3s ease;
  }
  .menu-panel[data-active="services"] .menu-panel__sub[data-sub="services"] {
    max-height: 60vh;
  }
}

.menu-panel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.menu-panel__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-panel__eyebrow {
  font-family: var(--ff);
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #daa864;
}
.menu-panel__city {
  font-family: var(--ff);
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.menu-panel__close {
  width: clamp(40px, 3vw, 56px);
  height: clamp(40px, 3vw, 56px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.menu-panel__close:hover {
  border-color: #daa864;
  transform: rotate(90deg);
}

.menu-panel__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 0.4vw, 10px);
  margin: clamp(20px, 3vw, 50px) 0;
}
.menu-panel__nav a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: clamp(14px, 1.4vw, 26px);
  color: #fff;
  text-decoration: none;
  font-family: var(--ff);
  font-weight: 400;
  letter-spacing: 0.005em;
  padding: clamp(10px, 1.1vw, 18px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.menu-panel__nav a:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.menu-panel[aria-hidden="false"] .menu-panel__nav a {
  opacity: 1;
  transform: translateX(0);
}
.menu-panel[aria-hidden="false"] .menu-panel__nav a:nth-child(1) { transition-delay: .35s, .35s, 0s; }
.menu-panel[aria-hidden="false"] .menu-panel__nav a:nth-child(2) { transition-delay: .43s, .43s, 0s; }
.menu-panel[aria-hidden="false"] .menu-panel__nav a:nth-child(3) { transition-delay: .51s, .51s, 0s; }
.menu-panel[aria-hidden="false"] .menu-panel__nav a:nth-child(4) { transition-delay: .59s, .59s, 0s; }
.menu-panel__nav a:hover { border-color: #daa864; }

.menu-panel__num {
  font-family: var(--ff);
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.4);
  transition: color .3s ease, letter-spacing .3s ease;
}
.menu-panel__txt {
  font-family: var(--ff);
  font-size: clamp(17px, 2.2vw, 38px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.005em;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.menu-panel__txt > span {
  display: inline-block;
  position: relative;
  transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.menu-panel__txt > span::before {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  color: #daa864;
  pointer-events: none;
}
.menu-panel__nav a:hover .menu-panel__txt > span { transform: translateY(-100%); }
.menu-panel__nav a:hover .menu-panel__num { color: #daa864; letter-spacing: 0.45em; }

.menu-panel__arr {
  font-family: var(--ff);
  font-size: clamp(14px, 1.1vw, 22px);
  color: rgba(255,255,255,0.35);
  transform: translateY(-2px);
  transition: color .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.menu-panel__nav a:hover .menu-panel__arr { color: #daa864; transform: translate(6px, -8px); }

.menu-panel__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(16px, 1.8vw, 40px);
  padding-top: clamp(22px, 2.4vw, 40px);
  border-top: 1px solid rgba(255,255,255,0.14);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease .85s, transform .6s cubic-bezier(.16,1,.3,1) .85s;
}
.menu-panel[aria-hidden="false"] .menu-panel__foot {
  opacity: 1;
  transform: translateY(0);
}
.menu-panel__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-panel__card-label {
  font-family: var(--ff);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #daa864;
}
.menu-panel__card-phone {
  font-family: var(--ff);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  transition: color .3s ease;
  width: max-content;
}
.menu-panel__card-phone:hover { color: #daa864; }
.menu-panel__card-addr {
  font-family: var(--ff);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
}

.menu-panel__sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1vw, 18px);
}
.menu-panel__social {
  list-style: none;
  margin: 0; padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.6vw, 12px);
}
.menu-panel__social li {
  position: relative;
}
.menu-panel__social li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * clamp(6px, 0.6vw, 12px) / 2);
  transform: translateX(-50%);
  width: 1px;
  height: calc(clamp(6px, 0.6vw, 12px));
  background: rgba(255,255,255,0.18);
}
.menu-panel__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 2.3vw, 38px);
  height: clamp(28px, 2.3vw, 38px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-family: var(--ff);
  font-size: clamp(10px, 0.7vw, 12px);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.menu-panel__social a:hover { border-color: #daa864; color: #0e0e0e; background: #daa864; }
.menu-panel__copy {
  font-family: var(--ff);
  font-size: clamp(9px, 0.6vw, 11px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* --- burger → X morph on open --- */
.hero__nav .icon-btn[aria-label="Menu"] {
  transition: border-color .35s ease;
}
.hero__nav .icon-btn[aria-label="Menu"] svg line {
  transform-origin: 12px 9px;
  transform-box: fill-box;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
body.menu-open .hero__nav .icon-btn[aria-label="Menu"] svg line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .hero__nav .icon-btn[aria-label="Menu"] svg line:nth-child(2) {
  opacity: 0;
}
body.menu-open .hero__nav .icon-btn[aria-label="Menu"] svg line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 720px) {
  .menu-panel { width: 100%; }
  .menu-panel__inner { padding: clamp(20px, 5vw, 40px); }
}
/* ---- landscape photo ---- */
.about__landscape {
  margin: 0;
  width: 100%;
  aspect-ratio: 2604 / 720;   /* matches PDF mockup */
  overflow: hidden;
}
.about__landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ============================================================
   PROJECTS — index page (editorial portfolio)
   ============================================================ */
.hero--inner { padding-bottom: 0; }
.hero--inner .hero__bar { /* sticky header reused */ }

.proj-hero {
  padding: calc(clamp(110px, 9vw, 160px) + clamp(20px, 2vw, 30px)) var(--side) clamp(40px, 4vw, 70px);
  max-width: var(--max);
  margin: 0 auto;
}
.proj-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 2.4vw, 44px);
  padding-bottom: clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.proj-hero__eye {
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #daa864;
}
.proj-hero__count {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--ff);
}
.proj-hero__count b {
  font-weight: 400;
  font-size: clamp(22px, 2vw, 36px);
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.proj-hero__count span {
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
}

.proj-hero__title {
  margin: 0 0 clamp(20px, 2vw, 36px);
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(56px, 11vw, 180px);
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--c-ink);
  overflow: hidden;
}
.proj-hero__lead {
  max-width: 640px;
  margin: 0 0 clamp(32px, 3vw, 60px);
  font-family: var(--ff);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: #2b2b2b;
}

.proj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.8vw, 12px);
}
.proj-filter {
  font-family: var(--ff);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.55);
  background: transparent;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: clamp(8px, 0.8vw, 12px) clamp(16px, 1.4vw, 22px);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.proj-filter:hover { border-color: var(--c-ink); color: var(--c-ink); }
.proj-filter.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #fff;
}

/* feed */
.proj-feed {
  padding: clamp(40px, 4vw, 80px) var(--side) clamp(60px, 6vw, 110px);
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 6vw, 130px);
}
.proj-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(30px, 4vw, 80px);
  align-items: center;
  position: relative;
  padding-bottom: clamp(60px, 6vw, 130px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.proj-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.proj-row.is-hidden { display: none; }
.proj-row--media-left .proj-row__meta { order: 2; }
.proj-row--media-left .proj-row__media { order: 1; }

.proj-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 24px);
}
.proj-row__num {
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #daa864;
}
.proj-row__name {
  margin: 0;
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 72px);
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--c-ink);
  transition: color .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.proj-row__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 16px);
  margin: 0;
  padding: 0;
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}
.proj-row__tags li {
  display: inline-flex;
  align-items: center;
}
.proj-row__tags li + li::before {
  content: "·";
  margin-right: clamp(10px, 1vw, 16px);
  color: rgba(0,0,0,0.3);
}
.proj-row__desc {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: #2b2b2b;
  max-width: 38em;
}
.proj-row__cta {
  font-family: var(--ff);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  padding: clamp(10px, 1vw, 14px) 0;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  transition: color .3s ease;
}
.proj-row__cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--c-ink);
  transition: right .45s cubic-bezier(.83,0,.17,1), background-color .25s ease;
}
.proj-row__cta span {
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.proj-row__cta:hover { color: #daa864; }
.proj-row__cta:hover::before { right: 0; background: #daa864; }
.proj-row__cta:hover span { transform: translate(6px, -6px); }

.proj-row__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #ececec;
}
.proj-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.proj-row:hover .proj-row__media img { transform: scale(1.04); }
.proj-row:hover .proj-row__name { color: #daa864; transform: translateX(6px); }
.proj-row__media-label {
  position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  right: clamp(14px, 1.4vw, 22px);
  font-family: var(--ff);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 4px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* reveal anims — content visible by default, animation plays when .is-in added */
@keyframes projCharIn {
  from { opacity: 0; transform: translateY(110%); }
  to { opacity: 1; transform: none; }
}
.js-on .proj-hero__title .char { display: inline-block; }
.js-on .proj-hero__title.is-in .char {
  animation: projCharIn 1.6s cubic-bezier(.16,1,.3,1) both;
}

@keyframes projFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.js-on .proj-hero__lead.is-in { animation: projFadeUp 1.2s cubic-bezier(.16,1,.3,1) .4s both; }
.js-on .proj-filters.is-in { animation: projFadeUp 1.2s cubic-bezier(.16,1,.3,1) .6s both; }

@keyframes projRowIn {
  from { opacity: 0; transform: translateY(60px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.js-on .proj-row.is-in { animation: projRowIn 1.4s cubic-bezier(.16,1,.3,1) both; }

@keyframes projMediaClip {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}
@keyframes projMediaZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
.js-on .proj-row.is-in .proj-row__media {
  animation: projMediaClip 1.6s cubic-bezier(.83,0,.17,1) .2s both;
}
.js-on .proj-row.is-in .proj-row__media img {
  animation: projMediaZoom 2.2s cubic-bezier(.2,.6,.2,1) .2s both;
}

/* next CTA */
.proj-next {
  padding: clamp(60px, 7vw, 140px) var(--side) clamp(80px, 8vw, 160px);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 30px);
}
.proj-next__eye {
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #daa864;
}
.proj-next__cta {
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(42px, 7vw, 120px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--c-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 30px);
  transition: color .35s ease;
}
.proj-next__txt {
  display: inline-block;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.proj-next__arr {
  font-family: var(--ff);
  font-size: 0.55em;
  color: #daa864;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.proj-next__cta:hover { color: #daa864; }
.proj-next__cta:hover .proj-next__txt { transform: translateX(14px); }
.proj-next__cta:hover .proj-next__arr { transform: translate(20px, -10px); }

.js-on .proj-next.is-in { animation: projFadeUp 1.4s cubic-bezier(.16,1,.3,1) both; }

/* ============================================================
   PROJECTS · v2 — Cursor-follow Spotlight (variant B)
   ============================================================ */
.page-spotlight {
  background: #fff;
  color: var(--c-ink);
  cursor: none;
}
.page-spotlight * { cursor: none !important; }
.page-spotlight a, .page-spotlight button { cursor: none !important; }

.spot-hero {
  padding: calc(clamp(110px, 9vw, 160px) + clamp(20px, 2vw, 30px)) var(--side) clamp(40px, 4vw, 70px);
  max-width: var(--max);
  margin: 0 auto;
}
.spot-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.spot-hero__eye {
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #daa864;
}
.spot-hero__count {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--ff);
}
.spot-hero__count b {
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 48px);
  letter-spacing: -0.005em;
  color: var(--c-ink);
  transition: color .3s ease;
}
.spot-hero__count span {
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
}
.spot-hero__title {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--ff);
  font-weight: 200;
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--c-ink);
}
.spot-hero__lead {
  margin: 0;
  font-family: var(--ff);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}

.spot-list {
  padding: clamp(40px, 5vw, 80px) var(--side) clamp(60px, 7vw, 140px);
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.spot-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(20px, 2.4vw, 44px);
  padding: clamp(22px, 2.4vw, 40px) 0;
  text-decoration: none;
  color: var(--c-ink);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: color .35s ease, padding .5s cubic-bezier(.16,1,.3,1);
}
.spot-item:first-of-type { border-top: 1px solid rgba(0,0,0,0.08); }
.spot-item__num {
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  color: rgba(0,0,0,0.4);
  transform: translateY(-0.4em);
  transition: color .3s ease, letter-spacing .3s ease;
}
.spot-item__name {
  font-family: var(--ff);
  font-weight: 200;
  font-size: clamp(40px, 7vw, 120px);
  letter-spacing: -0.01em;
  line-height: 1;
  position: relative;
  display: inline-block;
  transition: transform .55s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.spot-item__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.04em;
  height: 2px;
  background: #daa864;
  transition: right .65s cubic-bezier(.83,0,.17,1);
}
.spot-item__meta {
  font-family: var(--ff);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  text-align: right;
  align-self: center;
  transition: color .3s ease, opacity .3s ease;
}

.spot-item:hover { color: #daa864; }
.spot-item:hover .spot-item__num { color: #daa864; letter-spacing: 0.48em; }
.spot-item:hover .spot-item__name { transform: translateX(22px); color: #daa864; }
.spot-item:hover .spot-item__name::after { right: 0; }
.spot-item:hover .spot-item__meta { color: var(--c-ink); }
.spot-item:hover ~ .spot-item .spot-item__name { opacity: 0.35; }
.spot-list:has(.spot-item:hover) .spot-item:not(:hover) .spot-item__name { opacity: 0.35; }

/* floating thumb */
.spot-thumb {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(220px, 18vw, 320px);
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity .35s ease;
  will-change: transform, opacity;
}
.spot-thumb.is-on { opacity: 1; }
.spot-thumb__wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
}
.spot-thumb__wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(218,168,100,0.4);
  z-index: 2;
  pointer-events: none;
}
.spot-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.spot-thumb.is-on .spot-thumb__img { transform: scale(1); }
.spot-thumb__meta {
  display: block;
  margin-top: 12px;
  padding: 6px 10px;
  background: var(--c-ink);
  color: #fff;
  font-family: var(--ff);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
}

/* custom cursor — visible ring with center dot */
.page-spotlight #spotCursor {
  position: fixed;
  top: 0; left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #111;
  pointer-events: none;
  z-index: 81;
  transform: translate3d(-100px, -100px, 0);
  transition: transform .25s cubic-bezier(.16,1,.3,1), width .35s ease, height .35s ease, border-color .25s ease, background .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.page-spotlight #spotCursor::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111;
  transition: background .25s ease, transform .35s ease;
}
.page-spotlight #spotCursor.is-link {
  width: 64px;
  height: 64px;
  background: #daa864;
  border-color: #daa864;
}
.page-spotlight #spotCursor.is-link::after {
  background: #fff;
  transform: scale(2);
}

/* variants switcher */
.spot-variants {
  padding: clamp(40px, 4vw, 80px) var(--side) clamp(40px, 4vw, 80px);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  background: #fff;
}
.spot-variants__label {
  font-family: var(--ff);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}
.spot-variants__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 16px);
}
.spot-variants__pill {
  font-family: var(--ff);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  text-decoration: none;
  padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 32px);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.spot-variants__pill:hover { border-color: var(--c-ink); }
.spot-variants__pill.is-current {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}

/* spotlight page reveal animations (via @keyframes) */
@keyframes spotFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.js-on .spot-hero__title,
.js-on .spot-hero__lead,
.js-on .spot-item,
.js-on .spot-variants {
  opacity: 0;
}
.js-on .spot-hero__title.is-in { animation: spotFadeUp 1.4s cubic-bezier(.16,1,.3,1) .1s forwards; }
.js-on .spot-hero__lead.is-in { animation: spotFadeUp 1.2s cubic-bezier(.16,1,.3,1) .35s forwards; }
.js-on .spot-item.is-in { animation: spotFadeUp 1.2s cubic-bezier(.16,1,.3,1) both; }
.js-on .spot-item.is-in:nth-of-type(1) { animation-delay: .45s; }
.js-on .spot-item.is-in:nth-of-type(2) { animation-delay: .55s; }
.js-on .spot-item.is-in:nth-of-type(3) { animation-delay: .65s; }
.js-on .spot-item.is-in:nth-of-type(4) { animation-delay: .75s; }
.js-on .spot-item.is-in:nth-of-type(5) { animation-delay: .85s; }
.js-on .spot-item.is-in:nth-of-type(6) { animation-delay: .95s; }
.js-on .spot-item.is-in:nth-of-type(7) { animation-delay: 1.05s; }
.js-on .spot-item.is-in:nth-of-type(8) { animation-delay: 1.15s; }
.js-on .spot-item.is-in:nth-of-type(9) { animation-delay: 1.25s; }
.js-on .spot-variants.is-in { animation: spotFadeUp 1.2s cubic-bezier(.16,1,.3,1) forwards; }

/* SPOTLIGHT mobile — disable cursor follow, show grid */
@media (max-width: 720px) {
  .page-spotlight, .page-spotlight * { cursor: auto !important; }
  .page-spotlight::before { display: none; }
  .spot-thumb { display: none; }
  .spot-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .spot-item__name { font-size: clamp(34px, 11vw, 56px); }
  .spot-item__meta { text-align: left; }
  .spot-item:hover .spot-item__name { transform: none; }
  .spot-list:has(.spot-item:hover) .spot-item:not(:hover) .spot-item__name { opacity: 1; }
}

/* ============================================================
   MOBILE — full responsive layout (must stay LAST in file)
   ============================================================ */
@media (max-width: 880px) {
  :root { --side: clamp(16px, 4vw, 28px); }

  /* HERO — fixed bar is ~64px on mobile, keep content clear of it */
  .hero { padding-top: 76px; }
  .hero__bar { gap: 14px; }
  .logo__mark { width: 31px; height: 24px; }
  .logo__word { font-size: 15px; }
  .hero__nav { gap: 12px; }
  .icon-btn { width: 38px; height: 32px; }
  .hero__brand {
    margin: clamp(16px, 5vw, 32px) 0 clamp(14px, 4vw, 24px);
    font-size: clamp(34px, 9.5vw, 64px);
    letter-spacing: 0;
  }
  .hero__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
  }
  .hero__info .dash-v { display: none; }
  .hero__info-col { padding: 4px 0; }
  .hero__info-text br { display: none; }

  /* ABOUT */
  .about { padding-top: clamp(38px, 8vw, 64px); }
  .about__head { margin-bottom: clamp(18px, 4vw, 28px); }
  .about__title { font-size: clamp(28px, 8vw, 44px); }
  .about__chip { width: clamp(86px, 22vw, 130px); height: clamp(26px, 6vw, 34px); }
  .about__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .about__card { padding: clamp(20px, 5vw, 28px); }
  .about__card-title { font-size: clamp(58px, 18vw, 100px); }
  .about__card-text br { display: none; }
  .about__photo { aspect-ratio: 4 / 3; }
  .about__quote {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 0;
  }
  .about__quote-rule { display: none; }
  .about__quote-col br { display: none; }
  .about__landscape { aspect-ratio: 16 / 10; }

  /* LEMBAGA */
  .lembaga { padding-top: clamp(24px, 5vw, 36px); }
  .lembaga__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding-left: 0;
  }
  .lembaga__row .lembaga__chip { grid-column: 1 / -1; justify-self: end; }
  .lembaga__logo { width: clamp(48px, 14vw, 64px); }
  .lembaga__text { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.5; }
  .lembaga__chip { width: clamp(90px, 26vw, 130px); height: clamp(50px, 14vw, 80px); }

  /* TEAM */
  .team { padding-top: clamp(18px, 4vw, 28px); }
  .team__photo { aspect-ratio: 4 / 3; }

  /* CONTACTS */
  .contacts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: clamp(20px, 5vw, 36px);
  }
  .contacts__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 6vw, 32px);
    min-height: 0;
  }
  .contacts__title { font-size: clamp(20px, 5vw, 26px); }
  .contacts__rule { display: none; }
  .contacts__body {
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }
  .contacts__addr {
    white-space: normal;
    font-size: clamp(14px, 3.8vw, 18px);
  }
  .contacts__phone { font-size: clamp(18px, 4.8vw, 22px); }
  .contacts__map {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
  }

  /* FOOTER */
  .footer { padding: clamp(20px, 5vw, 32px) var(--side); }
  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: clamp(20px, 5vw, 32px);
  }
  .footer__nav {
    justify-content: flex-start;
    gap: clamp(14px, 4vw, 24px);
  }
  .footer__nav a { font-size: clamp(14px, 4vw, 18px); }

  /* FINAL CTA */
  .final__inner {
    gap: clamp(18px, 4vw, 32px);
    padding: clamp(20px, 5vw, 32px) var(--side);
  }
  .final__brand {
    margin: clamp(20px, 6vw, 32px) 0 0;
    font-size: clamp(34px, 9.5vw, 64px);
    letter-spacing: 0;
  }
  .final__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .final__info-rule { display: none; }
  .final__info-text br { display: none; }
  .final__menu {
    padding: clamp(24px, 6vw, 50px) 0 clamp(18px, 4vw, 32px);
    gap: 12px;
  }
  .final__menu a { font-size: clamp(14px, 4.2vw, 24px); }
  .final__menu { padding-top: clamp(60px, 14vw, 120px); }
  .final__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .final__lam { width: clamp(60px, 18vw, 90px); }

  /* MENU panel */
  .menu-panel { width: 100%; }
  .menu-panel__inner { padding: clamp(22px, 5vw, 36px) clamp(20px, 5vw, 40px); }
  .menu-panel__txt { font-size: clamp(20px, 6vw, 32px); }
  .menu-panel__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .menu-panel__sidebar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .menu-panel__social {
    flex-direction: row;
    gap: 12px;
  }
  .menu-panel__social li + li::before { display: none; }
}

@media (max-width: 480px) {
  .hero__brand { font-size: clamp(30px, 11vw, 50px); letter-spacing: 0; }
  .hero { padding-left: 14px; padding-right: 14px; }
  .about__title { font-size: clamp(24px, 7.4vw, 34px); letter-spacing: 0.12em; }
  .about__chip { width: 90px; height: 26px; }
  .about__card-title { font-size: clamp(50px, 16vw, 76px); }
  .final__brand { font-size: clamp(30px, 11vw, 50px); letter-spacing: 0; }
  .menu-panel__txt { font-size: clamp(20px, 6.4vw, 28px); }
  .contacts__addr { font-size: clamp(13px, 3.6vw, 16px); }
}

/* ---- PROJECTS page mobile ---- */
@media (max-width: 880px) {
  .proj-hero {
    padding: calc(clamp(80px, 18vw, 110px) + 20px) var(--side) clamp(30px, 6vw, 50px);
  }
  .proj-hero__top { flex-wrap: wrap; gap: 14px; }
  .proj-hero__title { font-size: clamp(48px, 16vw, 96px); }
  .proj-hero__lead { font-size: clamp(14px, 3.6vw, 17px); }
  .proj-filters { gap: 6px; }
  .proj-filter { padding: 6px 14px; font-size: 12px; }

  .proj-feed { gap: 50px; padding-bottom: 60px; }
  .proj-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 50px;
  }
  .proj-row--media-left .proj-row__media,
  .proj-row--media-left .proj-row__meta { order: initial; }
  .proj-row__media { aspect-ratio: 4 / 3; order: -1 !important; }
  .proj-row__name { font-size: clamp(28px, 8vw, 44px); }
  .proj-row__desc { font-size: clamp(13px, 3.6vw, 16px); }
  .proj-row__tags { font-size: 11px; gap: 8px; }

  .proj-next { padding: 60px var(--side) 80px; }
  .proj-next__cta { font-size: clamp(32px, 10vw, 60px); flex-wrap: wrap; }
}

/* ============================================================
   MENU SCREEN v2 — fullscreen per client mockup (Сайт 2 p.2)
   white top: logo / EN / X + KEÑ STUDIO + 3 info columns
   photo bottom: centered nav + socials left / LAM right
   ============================================================ */
.menu-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--c-ink);
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.83,0,.17,1), opacity .4s ease, visibility 0s;
}
.menu-screen[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s cubic-bezier(.83,0,.17,1), opacity .45s ease .3s, visibility 0s linear .9s;
  pointer-events: none;
}

.menu-screen__top {
  flex: 0 0 auto;
  padding: clamp(8px, 0.8vw, 12px) var(--side) clamp(14px, 1.4vw, 22px);
  background: #fff;
}
.menu-screen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.menu-screen__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-ink);
  padding: 10px;
  display: inline-flex;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.menu-screen__close:hover { transform: rotate(90deg); opacity: .6; }

.menu-screen__brand {
  margin: clamp(8px, 1.4vw, 24px) 0 clamp(10px, 1.6vw, 26px);
  text-align: center;
  font-family: var(--ff);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 72px);
  letter-spacing: 0.005em;
  line-height: 1;
}

.menu-screen__info {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  padding: clamp(12px, 1.6vw, 24px) 0;
  position: relative;
}
.menu-screen__info::before,
.menu-screen__info::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--dash-thick);
  background-image: repeating-linear-gradient(
    to right,
    var(--dash-color) 0,
    var(--dash-color) var(--dash-len),
    transparent var(--dash-len),
    transparent calc(var(--dash-len) + var(--dash-gap))
  );
}
.menu-screen__info::before { top: 0; }
.menu-screen__info::after  { bottom: 0; }
.menu-screen__info .hero__info-title { font-size: 17px; margin-bottom: 6px; }
.menu-screen__info .hero__info-text  { font-size: 12px; }

.menu-screen__photo {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.menu-screen__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.62) saturate(0.9);
  transform: scale(1.08);
}
.menu-screen[aria-hidden="false"] .menu-screen__bg {
  animation: menuKenBurns 14s ease-in-out infinite alternate;
}
@keyframes menuKenBurns {
  from { transform: scale(1.08) translateY(0); }
  to   { transform: scale(1.16) translateY(-1.5%); }
}
.menu-screen__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.26);
}

.menu-screen__nav {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  text-align: center;
}
.menu-screen__nav a {
  color: #fff;
  text-decoration: none;
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 44px);
  letter-spacing: 0.01em;
  line-height: 1.15;
  position: relative;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.menu-screen__nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -4px;
  height: 1px;
  background: #daa864;
  transition: left .35s cubic-bezier(.16,1,.3,1), right .35s cubic-bezier(.16,1,.3,1);
}
.menu-screen__nav a:hover::after { left: 0; right: 0; }
.menu-screen[aria-hidden="false"] .menu-screen__nav a { opacity: 1; transform: translateY(0); }
.menu-screen[aria-hidden="false"] .menu-screen__nav a:nth-child(1) { transition-delay: .40s; }
.menu-screen[aria-hidden="false"] .menu-screen__nav a:nth-child(2) { transition-delay: .48s; }
.menu-screen[aria-hidden="false"] .menu-screen__nav a:nth-child(3) { transition-delay: .56s; }
.menu-screen[aria-hidden="false"] .menu-screen__nav a:nth-child(4) { transition-delay: .64s; }

.menu-screen__foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--side) clamp(16px, 2vw, 30px);
}
.menu-screen__social {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-screen__social a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-family: var(--ff);
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.menu-screen__social a:hover { border-color: #daa864; background: #daa864; color: #0e0e0e; }
.menu-screen__lam {
  width: clamp(64px, 6vw, 96px);
  height: auto;
  opacity: .9;
}

@media (max-width: 760px) {
  .menu-screen__info { display: none; }
  .menu-screen__brand { font-size: clamp(26px, 8vw, 40px); margin-bottom: 14px; }
  .menu-screen__nav a { font-size: clamp(26px, 7.2vw, 34px); }
  .menu-screen__lam { width: 48px; }
}

/* ============================================================
   CASE RENDERS GRID — click opens fullscreen lightbox
   ============================================================ */
.case-grid-sec { padding: clamp(36px, 4.6vw, 80px) var(--side); }
.case-grid-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(18px, 2vw, 30px);
}
.case-grid-sec__hint {
  font-family: var(--ff);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.case-grid__cell {
  margin: 0;
  overflow: hidden;
  background: #ececec;
  cursor: zoom-in;
  aspect-ratio: 16 / 10;
}
.case-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.case-grid__cell:hover img { transform: scale(1.045); filter: brightness(1.04); }
.case-grid__cell:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 720px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-grid__cell, .case-grid__cell:first-child { aspect-ratio: 16 / 10; }
}

/* ============================================================
   HERO SLIDER — frames change vertically, then horizontally
   bar-pagination per client mockup
   ============================================================ */
.hero__slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 10;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(.83,0,.17,1), opacity .9s ease;
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__slide.is-on { opacity: 1; transform: translate(0,0); position: absolute; z-index: 2; }
.hero__slide.is-in-v { transform: translateY(100%); opacity: 1; z-index: 2; }
.hero__slide.is-in-h { transform: translateX(100%); opacity: 1; z-index: 2; }
.hero__slide.is-out-v { transform: translateY(-22%); opacity: 0; z-index: 1; }
.hero__slide.is-out-h { transform: translateX(-22%); opacity: 0; z-index: 1; }

.hero__slider-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.hero__slider-dots span {
  width: 34px;
  height: 3px;
  background: rgba(255,255,255,0.45);
  transition: background .4s ease;
}
.hero__slider-dots span.is-on { background: #fff; }

/* ABOUT US — заголовок выезжает справа налево (место оранжевого квадрата) */
.about__head { overflow: hidden; }
.js-on .about__title {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
.js-on .about__head.is-in .about__title { opacity: 1; transform: translateX(0); }

/* LEMBAGA — логотип всплывает */
.js-on .lembaga__logo {
  opacity: 0;
  transform: translateY(34px) scale(.92);
  transition: opacity .8s ease, transform 1s cubic-bezier(.34,1.45,.45,1);
}
.js-on .lembaga__row.is-in .lembaga__logo { opacity: 1; transform: translateY(0) scale(1); }
.js-on .lembaga__text {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .9s ease .15s, transform 1.1s cubic-bezier(.16,1,.3,1) .15s;
}
.js-on .lembaga__row.is-in .lembaga__text { opacity: 1; transform: translateX(0); }
@media (max-width: 720px) {
  .hero__slider { aspect-ratio: 4 / 3; }
  .hero__slider-dots span { width: 24px; }
}

/* предотвратить горизонтальный скролл от slide-in анимаций */
.lembaga, .contacts { overflow-x: clip; }
.menu-screen { overflow: hidden; }
html, body { overflow-x: clip; }

/* меню: подсписок услуг — раскрывается при наведении/тапе (реф Minale+Mann, чат 28.05) */
.menu-screen__item { display: flex; flex-direction: column; align-items: center; }
.menu-screen__item > a {
  color: #fff; text-decoration: none; font-family: var(--ff); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 44px); letter-spacing: 0.01em; line-height: 1.15; position: relative;
}
.menu-screen__item > a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 1px;
  background: #daa864; transition: left .35s cubic-bezier(.16,1,.3,1), right .35s cubic-bezier(.16,1,.3,1);
}
.menu-screen__item:hover > a::after { left: 0; right: 0; }
.menu-screen__sub {
  display: flex; align-items: baseline; gap: 14px;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px);
  transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), margin .4s ease;
}
.menu-screen__item:hover .menu-screen__sub,
.menu-screen__item.is-sub-open .menu-screen__sub {
  max-height: 60px; opacity: 1; transform: translateY(0); margin-top: 10px;
}
.menu-screen__sub a {
  color: rgba(255,255,255,0.85); text-decoration: none; font-family: var(--ff);
  font-weight: 300; font-size: clamp(13px, 1.1vw, 18px); letter-spacing: 0.06em;
  border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease;
}
.menu-screen__sub a:hover { color: #daa864; border-color: #daa864; }
.menu-screen__sub span { color: rgba(255,255,255,0.35); font-size: 14px; }
/* nav reveal: вложенный пункт наследует анимацию появления */
.menu-screen__nav .menu-screen__item { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.menu-screen[aria-hidden="false"] .menu-screen__nav .menu-screen__item { opacity: 1; transform: translateY(0); transition-delay: .40s; }
@media (hover: none) {
  /* мобайл: первый тап раскрывает подсписок, второй — переход (JS) */
  .menu-screen__sub { gap: 10px; }
}

/* затемнение фото сразу при открытии меню — как у Minale+Mann */
.menu-screen__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease .15s;
  z-index: 1;
}
.menu-screen[aria-hidden="false"] .menu-screen__photo::after { opacity: 1; }

/* меню: десктоп — пункты уходят влево, справа от линии выпадает список услуг (реф Minale+Mann) */
@media (hover: hover) {
  .menu-screen__item .menu-screen__sub { display: none; }
  .menu-screen__nav {
    transition: transform 1.1s cubic-bezier(.22,1,.36,1);
  }
  .menu-screen.is-sub .menu-screen__nav {
    transform: translateX(calc(-1 * clamp(150px, 15vw, 260px)));
  }

  /* остальные пункты приглушаются, активный остаётся ярким */
  .menu-screen__nav > a,
  .menu-screen__item > a {
    transition: opacity .6s ease, color .3s ease;
  }
  .menu-screen.is-sub .menu-screen__nav > a { opacity: .28; }
  .menu-screen.is-sub .menu-screen__item > a { opacity: 1; }
  .menu-screen__aside {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    margin-left: clamp(20px, 2.6vw, 60px);
    transform: translateY(-50%) translateX(34px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vw, 20px);
    border-left: 1px solid rgba(255,255,255,0.28);
    padding-left: clamp(24px, 2.6vw, 48px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
  }
  .menu-screen.is-sub .menu-screen__aside {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
  }
  .menu-screen__aside a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-family: var(--ff);
    font-weight: 300;
    font-size: clamp(16px, 1.5vw, 24px);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateX(18px);
    transition: color .25s ease, padding-left .35s cubic-bezier(.16,1,.3,1), opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
  }
  .menu-screen.is-sub .menu-screen__aside a { opacity: 1; transform: translateX(0); }
  .menu-screen.is-sub .menu-screen__aside a:nth-child(1) { transition-delay: .12s, 0s, .12s, .12s; }
  .menu-screen.is-sub .menu-screen__aside a:nth-child(2) { transition-delay: .20s, 0s, .20s, .20s; }
  .menu-screen.is-sub .menu-screen__aside a:nth-child(3) { transition-delay: .28s, 0s, .28s, .28s; }
  .menu-screen__aside a:hover { color: #daa864; padding-left: 8px; }
}
@media (hover: none) {
  .menu-screen__aside { display: none; }
}