/* Homelia: a simple, quiet landing page. */

@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-300-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-300-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-400-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/noto-serif-armenian-armenian-300-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/noto-serif-armenian-armenian-300-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-armenian-armenian-400-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-armenian-armenian-400-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/manrope-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/manrope-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/manrope-cyrillic-300-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/manrope-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/noto-sans-armenian-armenian-300-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-sans-armenian-armenian-400-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/noto-sans-armenian-armenian-500-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/noto-sans-armenian-armenian-500-normal.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }

:root {
  /* the palette of homelia.am: near-white with a breath of green, green-black ink */
  --paper: #f5f7f5;
  --paper-2: #e8ede9;
  --ink: #141a17;
  --ink-2: #1e2521;
  --mute: #3c4640;
  --line: #d6ddd7;
  --night: #111613;
  --night-2: #1a211d;
  --on-night: #f2f5f2;
  --on-night-2: rgba(242, 245, 242, 0.9);
  --line-night: rgba(242, 245, 242, 0.16);
  --bronze: #2e5a47;
  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 4.4vw, 72px);
  --max: 1520px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--ink); color: var(--paper); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.label {
  font: 600 11.5px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 12px; z-index: 100; background: var(--paper); padding: 8px 12px; }

/* Header */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--on-night);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.top.solid {
  background: rgba(245, 247, 245, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  color: var(--ink);
  border-color: var(--line);
}
.top.solid.night { background: rgba(17, 22, 19, 0.86); color: var(--on-night); border-color: var(--line-night); }
.top.solid.night .nav .talk:hover span { color: var(--night); }
.brand { display: flex; align-items: center; }
.brand svg { width: 118px; height: 38px; fill: currentColor; }
.nav { --nav-gap: clamp(20px, 2.6vw, 40px); display: flex; align-items: center; gap: var(--nav-gap); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.nav a { position: relative; opacity: 1; transition: opacity 0.3s; }
.nav a:hover { opacity: 0.8; }
.nav a:hover { opacity: 1; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 7px; padding: 8px 4px; font-size: 12.5px; letter-spacing: 0.08em; opacity: 0.9; transition: opacity 0.3s; }
.lang-btn:hover, .lang-btn[aria-expanded='true'] { opacity: 1; }
.lang-btn svg { width: 9px; height: 6px; transition: transform 0.3s var(--ease); }
.lang-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -14px;
  z-index: 60;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(17, 22, 19, 0.35);
  transform-origin: top right;
  animation: menu 0.22s var(--ease);
}
@keyframes menu { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.lang-menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  text-align: left;
  letter-spacing: 0;
}
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--paper-2); outline: none; }
.lang-menu button[aria-current='true']::after {
  content: '';
  width: 12px;
  height: 7px;
  margin-left: 16px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}
.foot-langs { display: flex; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.foot-langs button { padding: 6px 8px; opacity: 0.6; transition: opacity 0.3s; }
.foot-langs button + button::before { content: '·'; margin-right: 12px; opacity: 0.6; }
.foot-langs button:hover, .foot-langs button[aria-current='true'] { opacity: 1; }

/* Switching language: the words fade out, change, and fade back in */
.swap-lang :is(.hero-copy, .nav .link, .talk, .clients ul, .clients .label, .statement .wrap, .service .text, .planned, .stage .sat, .head, .card-meta, .steps, .contact .label, .contact h2, .contact .row > p, .foot > span) { opacity: 0 !important; transition: opacity 0.18s ease !important; }
.swap-in :is(.hero-copy, .nav .link, .talk, .clients ul, .clients .label, .statement .wrap, .service .text, .planned, .stage .sat, .head, .card-meta, .steps, .contact .label, .contact h2, .contact .row > p, .foot > span) { transition: opacity 0.32s ease !important; }
.nav .talk { border: 1px solid currentColor; padding: 9px 18px; border-radius: 999px; opacity: 1; white-space: nowrap; }
.nav .talk::after { display: none; }
.nav .talk:hover { background: currentColor; }
.nav .talk:hover span { color: var(--night); }
.top.solid .nav .talk:hover span { color: var(--paper); }

/* Hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--on-night);
  background: var(--night);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.slide.on { opacity: 1; }
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50%) 50%; opacity: 0; transition: opacity 0.6s ease; }
.slide video.playing { opacity: 1; }
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 11, 0.5) 0%, rgba(10, 13, 11, 0) 18%),
    radial-gradient(130% 95% at 0% 100%, rgba(10, 13, 11, 0.9) 0%, rgba(10, 13, 11, 0.78) 30%, rgba(10, 13, 11, 0.42) 52%, rgba(10, 13, 11, 0) 74%),
    linear-gradient(0deg, rgba(10, 13, 11, 0.7) 0%, rgba(10, 13, 11, 0.25) 26%, rgba(10, 13, 11, 0) 44%);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: clamp(40px, 7vh, 88px); }
.hero .label { color: rgba(242, 245, 242, 0.86); margin: 0 0 22px; }
.hero h1, .hero .lede, .hero .label { text-shadow: 0 2px 24px rgba(6, 8, 7, 0.55), 0 0 2px rgba(6, 8, 7, 0.35); }
.hero h1 {
  margin: 0 0 clamp(22px, 3vh, 34px);
  font: 400 clamp(50px, 6.6vw, 124px)/0.98 var(--serif);
  color: #ffffff;
  letter-spacing: -0.012em;
  max-width: 13em;
}
.hero h1 em { font-style: italic; color: #ffffff; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero .lede { margin: 0; max-width: 36em; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.9); font-weight: 400; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn.light { background: var(--on-night); color: var(--night); }
.btn.light:hover { background: #fff; }
.btn.ghost { border: 1px solid rgba(242, 245, 242, 0.4); color: var(--on-night); }
.btn.ghost:hover { border-color: var(--on-night); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark:hover { background: #000; }
.btn.line { border: 1px solid var(--line); }
.btn.line:hover { border-color: var(--ink); }

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(32px, 6vh, 64px);
  padding-top: 18px;
  border-top: 1px solid rgba(242, 245, 242, 0.18);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(242, 245, 242, 0.66);
}
.caption { display: flex; align-items: center; gap: 14px; min-height: 18px; }
.ticks { display: flex; gap: 6px; }
.ticks i { display: block; width: 22px; height: 1px; background: rgba(242, 245, 242, 0.3); position: relative; overflow: hidden; }
.ticks i.on::after { content: ''; position: absolute; inset: 0; background: var(--on-night); transform-origin: left; animation: tick var(--slide, 7s) linear forwards; }
@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scroll-cue { display: flex; align-items: center; gap: 10px; }
.scroll-cue i { width: 1px; height: 26px; background: rgba(242, 245, 242, 0.4); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: var(--on-night); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* Developers */

.clients { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.clients .wrap { display: grid; gap: clamp(28px, 3vw, 44px); }
.clients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; }
.clients li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  color: var(--ink);
  opacity: 0.58;
  filter: grayscale(1);
  transition: opacity 0.4s, filter 0.4s;
}
.clients li:hover { opacity: 1; filter: none; }
.clients img { max-height: 44px; max-width: 150px; width: auto; }
.wordmark { font: 400 clamp(19px, 1.5vw, 26px)/1.1 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.wordmark small { display: block; font: 500 8.5px/1.6 var(--sans); letter-spacing: 0.32em; margin-top: 4px; }

/* Statement */

.statement { padding: clamp(96px, 14vw, 220px) 0; }
.statement .wrap { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 40px; }
.statement p.big {
  margin: 0;
  font: 300 clamp(30px, 3.5vw, 60px)/1.14 var(--serif);
  letter-spacing: -0.005em;
  max-width: 21em;
}
.statement p.big em { font-style: italic; color: var(--bronze); }
.statement .small { margin: clamp(32px, 4vw, 56px) 0 0; max-width: 34em; color: var(--ink-2); font-size: clamp(15px, 1.1vw, 17px); font-weight: 400; }

/* Services */

.services { padding-bottom: clamp(80px, 10vw, 160px); }
.service {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(20px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(40px, 5vw, 72px) 0;
}
.service + .service { border-top: 1px solid var(--line); }
.service .stage { grid-column: 1 / span 7; }
.service .text { grid-column: 9 / span 4; }
.service.flip .stage { grid-column: 6 / span 7; order: 2; }
.service.flip .text { grid-column: 1 / span 4; order: 1; }
.media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media.dark { background: #0b0d10; }
.num { font: 400 clamp(18px, 1.3vw, 22px)/1 var(--serif); font-style: italic; font-variant-numeric: lining-nums; color: var(--bronze); letter-spacing: 0.04em; }
.service h3 { margin: 18px 0 18px; font: 300 clamp(32px, 3vw, 52px)/1.04 var(--serif); letter-spacing: -0.005em; }
.service p { margin: 0; color: var(--ink-2); font-weight: 400; font-size: clamp(15px, 1.05vw, 17px); max-width: 26em; }
.more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.4s;
}
.more:hover { border-color: currentColor; }
.more svg { width: 12px; height: 12px; }

.planned {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 400;
}
.planned .label { margin-right: 8px; }
.planned span + span::before { content: '·'; margin-right: 28px; color: var(--mute); }

/* Work */

.work { background: var(--night); color: var(--on-night); padding: clamp(96px, 12vw, 180px) 0 clamp(80px, 10vw, 150px); }
.work .label { color: var(--on-night-2); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(48px, 6vw, 88px); }
.head h2 { margin: 16px 0 0; font: 300 clamp(44px, 5.6vw, 96px)/0.98 var(--serif); letter-spacing: -0.01em; }
.head h2 em { font-style: italic; }
.head p { margin: 0; max-width: 26em; color: var(--on-night-2); font-weight: 400; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(48px, 5vw, 80px) clamp(20px, 2.4vw, 40px); }
.card { grid-column: span 6; display: block; }
.card.wide { grid-column: span 12; }
.card .media { aspect-ratio: 3 / 2; background: var(--night-2); }
.card.wide .media { aspect-ratio: 21 / 9; }
.card-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 22px; }
.card h3 { margin: 0; font: 300 clamp(26px, 2.2vw, 38px)/1.1 var(--serif); }
.card .kind { margin: 8px 0 0; color: var(--on-night-2); font-size: 14px; font-weight: 400; }
.open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border: 1px solid var(--line-night);
  border-radius: 999px;
  transition: border-color 0.4s, background-color 0.4s, color 0.4s;
}
.card:hover .open:not(.soon) { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.open svg { width: 11px; height: 11px; }

/* Process */

.process { padding: clamp(96px, 12vw, 180px) 0; }
.process .head h2 { color: var(--ink); }
.process .head p { color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); counter-reset: step; }
.steps li { border-top: 1px solid var(--ink); padding-top: 26px; }
.steps .num { display: block; margin-bottom: 40px; }
.steps h3 { margin: 0 0 14px; font: 300 clamp(28px, 2.4vw, 40px)/1.08 var(--serif); }
.steps p { margin: 0; color: var(--ink-2); font-weight: 400; max-width: 24em; }

/* Contact */

.contact { position: relative; background: var(--paper-2); padding: clamp(104px, 13vw, 200px) 0 0; overflow: hidden; }
.contact h2 { margin: 18px 0 0; font: 300 clamp(52px, 8vw, 150px)/0.94 var(--serif); letter-spacing: -0.015em; }
.contact h2 em { font-style: italic; color: var(--bronze); }
.contact .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px 64px; flex-wrap: wrap; margin-top: clamp(44px, 5vw, 72px); }
.contact .row p { margin: 0; max-width: 28em; color: var(--ink-2); font-weight: 400; font-size: clamp(15px, 1.1vw, 18px); }
.reach { display: flex; flex-direction: column; gap: 6px; font: 300 clamp(24px, 2.2vw, 36px)/1.25 var(--serif); }
.reach a { border-bottom: 1px solid transparent; transition: border-color 0.4s; width: max-content; }
.reach a:hover { border-color: currentColor; }
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(96px, 12vw, 180px);
  padding: 26px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--mute);
}
.foot svg { width: 92px; height: 30px; fill: var(--ink); }

/* Reveal */

.js .rise { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .rise.seen { opacity: 1; transform: none; }
.js .hero .rise { transition-duration: 1.6s; }
.js .hero .rise.d1 { transition-delay: 0.15s; }
.js .hero .rise.d2 { transition-delay: 0.3s; }

/* Armenian sets wider; keep display sizes in check */

html[lang='hy'] .hero h1 { font-size: clamp(40px, 5.6vw, 104px); line-height: 1.08; letter-spacing: 0; }
html[lang='hy'] .contact h2 { font-size: clamp(40px, 6vw, 112px); line-height: 1.06; letter-spacing: 0; }
html[lang='hy'] .head h2 { font-size: clamp(36px, 4.4vw, 76px); line-height: 1.08; letter-spacing: 0; }
html[lang='hy'] .statement p.big { font-size: clamp(26px, 2.8vw, 48px); line-height: 1.3; }
html[lang='hy'] .service h3, html[lang='hy'] .steps h3 { font-size: clamp(26px, 2.3vw, 40px); line-height: 1.18; }
html[lang='hy'] .label { letter-spacing: 0.1em; }
html[lang='hy'] em, html[lang='hy'] .num { font-style: normal; }
html[lang='ru'] .hero h1 { font-size: clamp(44px, 6.4vw, 118px); }

/* Smaller screens */

@media (max-width: 1100px) {
  .service .stage, .service.flip .stage { grid-column: 1 / -1; order: 1; }
  .service .text, .service.flip .text { grid-column: 1 / -1; order: 2; margin-top: 32px; }
  .service .text p { max-width: 34em; }
}
@media (max-width: 860px) {
  .nav a.link { display: none; }
  .clients .wrap, .statement .wrap { grid-template-columns: 1fr; gap: 28px; }
  .card, .card.wide { grid-column: 1 / -1; }
  .card.wide .media { aspect-ratio: 3 / 2; }
  .steps { grid-template-columns: 1fr; }
  .steps .num { margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .top .wrap { height: 64px; }
  .brand svg { width: 98px; }
  .nav { gap: 12px; }
  .nav .talk { padding: 8px 12px; font-size: 12.5px; }
  .lang-menu { right: -60px; }
  .hero h1 { font-size: clamp(38px, 11vw, 50px); }
  html[lang='hy'] .hero h1 { font-size: clamp(27px, 7.4vw, 34px); }
  .hero .label { display: none; }
  .hero-row { gap: 26px; }
  .hero-row .actions { width: 100%; flex-wrap: nowrap; gap: 10px; }
  .hero-row .btn { flex: 1; justify-content: center; white-space: nowrap; height: 48px; padding: 0 14px; font-size: 13.5px; }
  .hero-foot { margin-top: 28px; }
  html[lang='hy'] .hero-row .actions { flex-direction: column; }
  html[lang='hy'] .hero-row .btn { flex: none; }
  html[lang='ru'] .hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .hero-foot .scroll-cue { display: none; }
  .clients ul { justify-content: flex-start; gap: 8px 32px; }
  .wordmark { font-size: 18px; }
  .card-meta { flex-direction: column; gap: 14px; }
  .planned span + span::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide, .js .rise, .js .stage, .js .stage .sat { transition: none !important; }
  .js .rise { opacity: 1; transform: none; }
  .js .stage, .js .stage .sat { translate: none; opacity: 1; }
  .scroll-cue i::after, .ticks i.on::after { animation: none; }
}

/* Opening, wide screens: the picture holds the right of the frame and melts into the dark on the left,
   so the words never sit on top of a building. */

@media (min-width: 1000px) {
  .hero .slides {
    left: 38%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 14%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 14%, #000 34%);
  }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(10, 13, 11, 0.45) 0%, rgba(10, 13, 11, 0) 16%),
      linear-gradient(0deg, rgba(10, 13, 11, 0.6) 0%, rgba(10, 13, 11, 0) 20%);
  }
  .hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; }
  .slide img { object-position: var(--focus, 50%) 50%; }
  .hero h1 { font-size: clamp(50px, 4.7vw, 92px); max-width: 8.2em; line-height: 1; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: clamp(28px, 3.4vh, 40px); }
  .hero .lede { max-width: 30em; }
  html[lang='hy'] .hero h1 { font-size: clamp(38px, 3.3vw, 64px); max-width: 11em; }
  html[lang='ru'] .hero h1 { font-size: clamp(46px, 4.5vw, 88px); max-width: 9em; }
}

/* Opening, narrow screens: the picture holds the top of the frame and melts into the dark below the words. */

@media (max-width: 999px) {
  .hero .slides {
    bottom: 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
  }
  .hero::after { background: linear-gradient(180deg, rgba(10, 13, 11, 0.5) 0%, rgba(10, 13, 11, 0) 16%); }
  .slide img { object-position: var(--focus, 50%) 50%; }
}
@media (max-width: 999px) and (min-aspect-ratio: 1/1) {
  .hero .slides { bottom: 30%; }
}

/* Service pictures: the full picture with rounded corners. Where it helps, the viewer's own control sits inside
   the picture over its quiet corner (time and weather, interior styles), the AI guide's conversation sits beside
   its recording, and VR carries a headset mark. Pictures rise gently into place; nothing zooms or expands. */

.stage {
  --g: clamp(14px, 3.4cqw, 28px);     /* inset of the controls from the picture's edge */
  --arrive: cubic-bezier(0.25, 0.8, 0.25, 1);
  --travel: cubic-bezier(0.45, 0, 0.1, 1);
  --shadow-sat: 0 0 0 1px rgba(17, 22, 19, 0.05), 0 14px 32px -8px rgba(10, 20, 14, 0.32), 0 4px 10px -4px rgba(0, 0, 0, 0.14);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #0e1310;
  isolation: isolate;
}
.stage::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17, 22, 19, 0.06); pointer-events: none; }
.pic { position: absolute; inset: 0; }
.pic.paper { background: #e8ece9; }
.pic img, .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.looks { position: absolute; inset: 0; }
.look { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.look.on { opacity: 1; }

/* Controls and cards inside the picture */
.sat {
  position: absolute;
  z-index: 2;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-sat);
  color: var(--ink);
  font-family: var(--sans);
}

/* The viewer's own pickers. A thumb travels to the chosen item; the picture follows a beat later. */
.pick-track { position: relative; display: flex; }
.pick button { position: relative; z-index: 1; cursor: pointer; color: var(--mute); transition: color 0.3s ease; }
.pick button[aria-pressed='true'] { color: var(--ink); }
.pick-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  translate: var(--x, 0) var(--y, 0);
  border-radius: 999px;
  transition: translate 0.5s var(--travel), width 0.5s var(--travel), height 0.5s var(--travel);
}
.pick.moved .pick-thumb { transition: none; }

/* Time and weather */
.pick-seg { left: var(--g); bottom: var(--g); padding: 5px; border-radius: 999px; }
.pick-seg .pick-thumb { background: var(--ink); }
.pick-seg button { height: 34px; padding: 0 16px; font: 500 13px/1 var(--sans); white-space: nowrap; }
.pick-seg button[aria-pressed='true'] { color: var(--on-night); }

/* Interior styles: a slim list at the left edge; the apartment is drawn whole beside it, never under it */
.pick-list { --list: min(20cqw, 168px); left: var(--g); top: var(--g); width: var(--list); padding: 10px 6px 6px; border-radius: 12px; }
.stage .pick-title { margin: 0 6px 6px; font: 500 10px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.pick-list .pick-track { flex-direction: column; }
.pick-list .pick-thumb { border-radius: 7px; background: var(--paper-2); }
.pick-list button { display: block; width: 100%; padding: 5px 8px; text-align: left; font: 400 12px/1.3 var(--sans); }
.pick-list button[aria-pressed='true'] { font-weight: 600; }
.stage-styles .looks { left: calc(var(--g) + min(20cqw, 168px) + 1.5cqw); }
.stage-styles .look img { object-fit: contain; }
html[lang='hy'] .pick-title { letter-spacing: 0.04em; }

/* The AI guide's conversation, timed to the recording. The recording's own small captions sit at its left, so
   the picture is drawn a little larger and anchored right, which crops them away and keeps the building. */
.stage-guide .pic img, .stage-guide .pic video { inset: -14% -4% auto auto; width: 140%; height: 140%; max-width: none; }
.chat { left: var(--g); bottom: var(--g); width: min(36cqw, 280px); padding: 14px 16px 16px; }
.chat-head { display: flex; align-items: center; gap: 10px; }
.orb {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f7fbf8 0%, #cfe9dd 46%, #94cdb5 100%);
  box-shadow: 0 0 0 4px rgba(148, 205, 181, 0.2);
}
.chat[data-state='speaking'] .orb { animation: orb 1.2s ease-in-out infinite alternate; }
@keyframes orb { to { box-shadow: 0 0 0 7px rgba(148, 205, 181, 0.32); } }
.chat-status { font: 500 12px/1.3 var(--sans); color: var(--mute); }
.stage .chat-q, .stage .chat-a { margin: 0; color: var(--ink); font: 400 13.5px/1.5 var(--sans); }
.stage .chat-q { margin: 14px 0 0 auto; width: fit-content; max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--paper-2); transition: opacity 0.25s ease; }
.stage .chat-a { margin-top: 10px; min-height: 3em; }
.chat .w { opacity: 0; transition: opacity 0.18s ease; }
.chat .w.on { opacity: 1; }
.chat-q:not(.on) { opacity: 0; }
.chat.out .chat-q, .chat.out .chat-a { opacity: 0; transition: opacity 0.3s ease; }

/* VR: the headset mark in the corner */
.chip {
  top: var(--g);
  right: var(--g);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 54px;
  padding: 0 22px 0 16px;
  gap: 10px;
  border-radius: 999px;
  background: rgba(17, 22, 19, 0.55);
  color: var(--on-night);
  box-shadow: 0 0 0 1px rgba(242, 245, 242, 0.18), 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  font: 600 17px/1 var(--sans);
  letter-spacing: 0.08em;
}
.chip svg { width: 32px; height: 32px; }

/* Arrival: the picture rises a little into place; its controls settle a beat later. Nothing grows, nothing zooms. */
.js .stage { opacity: 0; translate: 0 28px; transition: opacity 0.9s ease, translate 1.1s var(--arrive); }
.js .stage .sat { opacity: 0; translate: 0 -8px; transition: opacity 0.4s ease 0.45s, translate 0.9s var(--arrive) 0.45s; }
.js .stage.seen, .js .stage.seen .sat { opacity: 1; translate: 0 0; }

/* Phones: a taller picture, controls kept small; the style list becomes one pill naming the style shown */
@media (max-width: 640px) {
  .stage { aspect-ratio: 4 / 3.3; border-radius: 16px; --g: 12px; }
  .pick-seg button { height: 32px; padding: 0 13px; font-size: 12.5px; }
  .pick-list { top: auto; bottom: var(--g); width: auto; padding: 5px; border-radius: 999px; }
  .pick-list .pick-title, .pick-list .pick-thumb { display: none; }
  .pick-list button { display: none; padding: 0 14px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--on-night) !important; font-size: 12.5px; white-space: nowrap; }
  .pick-list button[aria-pressed='true'] { display: block; font-weight: 500; }
  .chat { width: 66%; padding: 10px 12px 12px; }
  .stage .chat-q, .stage .chat-a { font-size: 12.5px; }
  .stage .chat-q { margin-top: 10px; }
  .stage .chat-a { margin-top: 8px; min-height: 2.9em; }
  .orb { width: 20px; height: 20px; }
  .chip { height: 42px; padding: 0 16px 0 12px; font-size: 14px; }
  .chip svg { width: 26px; height: 26px; }
  .stage-styles .looks { left: 0; }
  .stage-styles .look img { object-fit: cover; }
}

/* Project cards: photographs, so a clean rounded edge and a hairline, no frame and no zoom */
.card .media { border-radius: 16px; }
.card .media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(242, 245, 242, 0.08); pointer-events: none; }
.card .media img { transition: opacity 0.4s ease; }


/* Write to us: WhatsApp and Telegram stay one tap away in the fixed header */
.nav .chat-link::after { display: none; }
.nav .chat-link + .chat-link { margin-left: calc(8px - var(--nav-gap)); }   /* the three ways to write sit together */
.nav .chat-link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.9; transition: background-color 0.3s, color 0.3s, opacity 0.3s; }
.nav .chat-link svg { width: 17px; height: 17px; fill: currentColor; }
.nav .chat-link:hover { opacity: 1; background: currentColor; }
.nav .chat-link:hover svg { fill: var(--night); }
.top.solid .nav .chat-link:hover svg { fill: var(--paper); }
.reach .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reach .socials a { display: inline-flex; align-items: center; gap: 9px; width: auto; padding: 11px 18px 11px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: 0; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.reach .socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.reach .socials svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 560px) {
  .nav .chat-link { width: 34px; height: 34px; }
  .nav .chat-link svg { width: 15px; height: 15px; }
  .nav .talk { display: none; }
}


/* Project links held back until the developers approve: a quiet label in place of the link */
.more.soon { color: var(--mute); border-bottom-color: transparent; cursor: default; }
.open.soon { border-style: dashed; opacity: 0.8; cursor: default; }

/* Opening switcher: quiet numbers, a thin line that grows beside the one playing and fills while it plays, the
   current project's name beside them, and two light arrows */
.hero-pick { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); min-width: 0; }
.hp-tabs { display: flex; align-items: center; gap: 4px; }
.hp-tab { display: flex; align-items: center; gap: 0; padding: 8px 6px; color: rgba(242, 245, 242, 0.5); font: italic 400 16px/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: 0.04em; cursor: pointer; transition: color 0.3s ease, gap 0.6s var(--ease); }
.hp-tab:hover, .hp-tab[aria-current] { color: var(--on-night); }
.hp-tab[aria-current] { gap: 12px; }
.hp-bar { position: relative; width: 0; height: 1px; overflow: hidden; background: rgba(242, 245, 242, 0.28); transition: width 0.6s var(--ease); }
.hp-tab[aria-current] .hp-bar { width: clamp(36px, 4vw, 60px); }
.hp-tab[aria-current] .hp-bar::after { content: ''; position: absolute; inset: 0; background: var(--on-night); transform-origin: left; animation: tick var(--slide, 7s) linear forwards; }
.hp-caption { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-night-2); font: 400 13px/1.3 var(--sans); letter-spacing: 0.02em; transition: opacity 0.3s ease; }
.hp-caption.swap { opacity: 0; }
.hp-arrows { display: flex; gap: 2px; margin-left: -6px; }
.hp-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--on-night); opacity: 0.7; cursor: pointer; transition: opacity 0.3s, background-color 0.3s; }
.hp-arrow svg { width: 13px; height: 13px; }
.hp-arrow:hover { opacity: 1; background: rgba(242, 245, 242, 0.1); }
html[lang='hy'] .hp-tab { font-style: normal; }
@media (max-width: 560px) {
  .hero-pick { gap: 12px; }
  .hp-tab { padding: 8px 4px; font-size: 15px; }
  .hp-tab[aria-current] { gap: 9px; }
  .hp-tab[aria-current] .hp-bar { width: 28px; }
  .hp-caption { display: none; }
  .hp-arrows { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .hp-tab[aria-current] .hp-bar::after { animation: none; } }
.head-side { max-width: 26em; }
.head-side p { margin: 0; color: var(--on-night-2); font-weight: 400; }
.work .head-side .more { color: var(--on-night); border-bottom-color: var(--line-night); }
.work .head-side .more:hover { border-bottom-color: var(--on-night); }

/* Search-ready pages (tools/build_seo.py). "What we do" is the heading of the services that follow it, set exactly
   as the label it was. On the published pages each language has its own address, so the language switches are
   links, drawn exactly like the buttons they replace. */
.statement h2.label { margin: 1em 0; }
.lang-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  text-align: left;
  letter-spacing: 0;
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--paper-2); outline: none; }
.nav .lang-menu a::after { content: none; }
.nav .lang-menu a[aria-current='true']::after, .nav .lang-menu a[aria-current='true']:hover::after {
  content: '';
  position: static;
  width: 12px;
  height: 7px;
  margin-left: 16px;
  background: none;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transform-origin: 50% 50%;
  transition: none;
}
.foot-langs a { padding: 6px 8px; opacity: 0.6; transition: opacity 0.3s; }
.foot-langs a + a::before { content: '·'; margin-right: 12px; opacity: 0.6; }
.foot-langs a:hover, .foot-langs a[aria-current='true'] { opacity: 1; }