:root {
  --black: #000f15;
  --cards-bg: #132025;
  --gray-main: #8b9093;
  --white: #ffffff;
  --flip: .78s;
  --ease: cubic-bezier(.72, 0, .18, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll smoothing is handled by Lenis (js/script.js) instead of native
   CSS scroll-behavior, which would fight it on anchor-link jumps. */

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Noto Sans Armenian', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.btn-pill {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 32px;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.36px;
  color: var(--white);
  white-space: nowrap;
}

.btn-contact { background: var(--cards-bg); }
/* Open state: the contact block's own "Կապ" is the active one (454:9925). */
.contact-overlay .btn-contact { background: #eaeaea; color: var(--black); }

/* ── Header (fixed) ──────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
}
/* The contact block carries its own Logo/Կապ/ENG row — the fixed header
   would just duplicate it while the block is open. */
body.contact-open .site-header {
  display: none;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 80px;
  position: relative;
}

.logo { width: 102px; height: 56px; flex-shrink: 0; }
.logo img { width: 100%; height: 100%; }

.header-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }

.header-icons-sticky {
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%) scaleX(0) scaleY(0.04);
  transform-origin: center;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
  opacity: 0;
  border-radius: 100px;
  overflow: hidden;
  pointer-events: none;
}

/* Reveal: a thin centered bar expands sideways, then unfurls vertically —
   matches the nav-bar entrance on nudot.com.tw (#nav_scroll_container /
   its "nsBarIn" keyframes). Hiding runs the exact same motion in reverse. */
.header-icons-sticky.visible {
  opacity: 1;
  pointer-events: auto;
  animation: headerIconsBarIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.header-icons-sticky.leaving {
  opacity: 1;
  pointer-events: none;
  animation: headerIconsBarOut 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes headerIconsBarIn {
  0%   { transform: translateX(-50%) scaleX(0) scaleY(0.04); border-radius: 100px; opacity: 1; }
  55%  { transform: translateX(-50%) scaleX(1) scaleY(0.04); border-radius: 100px; opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1) scaleY(1); border-radius: 24px; opacity: 1; }
}
@keyframes headerIconsBarOut {
  0%   { transform: translateX(-50%) scaleX(1) scaleY(1); border-radius: 24px; opacity: 1; }
  45%  { transform: translateX(-50%) scaleX(1) scaleY(0.04); border-radius: 100px; opacity: 1; }
  100% { transform: translateX(-50%) scaleX(0) scaleY(0.04); border-radius: 100px; opacity: 1; }
}

.hicon { position: relative; width: 56px; height: 56px; cursor: pointer; }
.hicon-bg {
  position: absolute;
  inset: 0;
  /* Design 256:1754 ("Icons small"): white at 7% — on the page's black
     that reads as #122025, the same tile Ծիրան's icon has built in. It
     was var(--black), the page colour, so the tiles didn't show at all. */
  background: rgba(255, 255, 255, 0.07);
  border-radius: 25.594px;
  transition: background 0.25s ease;
}
.hicon img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 13px; box-sizing: border-box; }
.hicon-flat img { padding: 0; }

/* ── def / hover / selected states (Figma icon set) — background swap
   is pure CSS; the glyph itself swaps to a differently-colored asset
   via js/script.js (initIconStates), since these aren't recolorable
   with a filter — hover/selected use distinct brand-colored artwork. */
.hicon:hover .hicon-bg, .icon264:hover .icon264-bg { background: #ffffff; }
.hicon.selected .hicon-bg, .icon264.selected .icon264-bg { background: #ececec; }
.hicon[data-icon="factory"]:hover .hicon-bg, .icon264[data-icon="factory"]:hover .icon264-bg { background: #efefef; }
.hicon[data-icon="factory"].selected .hicon-bg, .icon264[data-icon="factory"].selected .icon264-bg { background: #dbdbdb; }

.hicon .syu-p { position: absolute !important; z-index: 1; padding: 0 !important; object-fit: fill; }
.hicon .syu-p1 { top: 27.9px; left: 27.2px; width: 16.8px; height: 14.4px; }
.hicon .syu-p2 { top: 14.8px; left: 28.4px; width: 14.5px; height: 11.2px; }
.hicon .syu-p3 { top: 28.1px; left: 12.3px; width: 13.8px; height: 13.8px; }
.hicon .syu-p4 { top: 13.7px; left: 12.1px; width: 13.9px; height: 12.3px; }

/* ── Kinetic dot-grid background — fixed to the viewport, reacts to the
   cursor everywhere on the page (js/kinetic-grid.js). Sits behind all
   content; z-index:-1 keeps it clear of the header/overlay's stacking
   without requiring every section to opt into a higher z-index. ───── */
#kineticGrid {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  /* Out of the page zoom (see <head>): the grid always covers the real
     screen, and kinetic-grid.js sizes it from innerWidth/innerHeight,
     which are screen pixels. */
  zoom: calc(1 / var(--page-zoom, 1));
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* A full screen of the real window, whatever the page zoom — 100vh
     alone would shrink with it and pull the next section into view. */
  min-height: calc(100vh / var(--page-zoom, 1));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 80px 190px;
  overflow: hidden;
  perspective: 1400px;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 73px;
  width: 100%;
  max-width: 1760px;
  transform-origin: center bottom;
  will-change: transform, opacity;
}

/* One-shot "fly forward" transition on the hero → About scroll step
   (js/script.js): the hero content rushes toward the camera and fades
   as the destination content grows in from a distance to meet it —
   same depth-scroll idea as the reference, in the site's own palette. */
.hero-content.fly-out {
  animation: heroFlyOut 0.55s cubic-bezier(.55, 0, 1, .45) forwards;
}
@keyframes heroFlyOut {
  0%   { transform: scale(1) translateZ(0); opacity: 1; }
  100% { transform: scale(0.35) translateZ(-400px); opacity: 0; }
}

.top-container, .icons-row { transform-origin: center center; will-change: transform, opacity; }
.main-container.fly-in .top-container {
  animation: sectionFlyIn 0.6s cubic-bezier(0, .55, .45, 1) both;
}
.main-container.fly-in .icons-row {
  animation: sectionFlyIn 0.6s cubic-bezier(0, .55, .45, 1) 0.08s both;
}
@keyframes sectionFlyIn {
  0%   { transform: scale(1.35) translateZ(300px); opacity: 0; }
  100% { transform: scale(1) translateZ(0); opacity: 1; }
}

/* Reverse: About → hero scroll-up step — the same motion played backwards. */
.main-container.fly-out-up .top-container {
  animation: sectionFlyOut 0.55s cubic-bezier(.55, 0, 1, .45) forwards;
}
.main-container.fly-out-up .icons-row {
  animation: sectionFlyOut 0.55s cubic-bezier(.55, 0, 1, .45) 0.08s forwards;
}
@keyframes sectionFlyOut {
  0%   { transform: scale(1) translateZ(0); opacity: 1; }
  100% { transform: scale(1.35) translateZ(300px); opacity: 0; }
}

/* About → Anahit: same fly-through step, one section further down. */
.main-container.fly-out .top-container,
.main-container.fly-out .icons-row {
  animation: heroFlyOut 0.55s cubic-bezier(.55, 0, 1, .45) forwards;
}
.anahit-head, .anahit-grid { transform-origin: center center; will-change: transform, opacity; }
.anahit-section.fly-in .anahit-head {
  animation: sectionFlyIn 0.6s cubic-bezier(0, .55, .45, 1) both;
}
.anahit-section.fly-in .anahit-grid {
  animation: sectionFlyIn 0.6s cubic-bezier(0, .55, .45, 1) 0.08s both;
}
.anahit-section.fly-out-up .anahit-head,
.anahit-section.fly-out-up .anahit-grid {
  animation: sectionFlyOut 0.55s cubic-bezier(.55, 0, 1, .45) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content.fly-out, .main-container.fly-in .top-container,
  .main-container.fly-out-up .top-container,
  .main-container.fly-out .top-container, .anahit-section.fly-in .anahit-head,
  .anahit-section.fly-out-up .anahit-head { animation: none; }
}

/* Load-in reveal (sileent.com reference): both the wordmark and tagline
   are drawn vector logotypes, each letter its own <path> — staggered
   left to right, every letter rising from below into place like
   ascending stair steps. */
.hero-wordmark {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero-tagline {
  width: auto;
  max-width: 60%;
  height: auto;
  overflow: visible;
}
.hero-wordmark .stair-p,
.hero-tagline .stair-p {
  opacity: 0;
  transform: translateY(36px);
  animation: stairUp 0.7s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes stairUp {
  0%   { opacity: 0; transform: translateY(36px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark .stair-p, .hero-tagline .stair-p { animation: none; opacity: 1; transform: none; }
}

/* ── Main container (About + logos) ─────────────────────────── */
.main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 200px;
  padding: 80px 80px 0;
}

.top-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.about-card, .logo-card {
  background: var(--cards-bg);
  border-radius: 32px;
  padding: 48px;
}

.about-card { width: 1022px; display: flex; flex-direction: column; gap: 32px; }
.about-card h2 {
  font-weight: 600;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: 1.12px;
  color: var(--white);
}
.about-text { display: flex; flex-direction: column; gap: 16px; }
.about-text p {
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.36px;
  color: rgba(255, 255, 255, 0.92);
}

.v-divider { width: 1px; height: 100px; background: rgba(255, 255, 255, 0.16); flex-shrink: 0; }

.logo-card { width: 607px; display: flex; flex-direction: column; gap: 24px; }
.hab-logo { width: 269px; height: 50px; }
/* English page: the emblem, and the name set as text where the Armenian
   logo has it drawn (two bold lines, the legal form in italics under). */
.hab-logo-en { display: flex; align-items: center; gap: 16px; }
.hab-logo-en img { width: 72px; height: 50px; flex-shrink: 0; }
.hab-name { display: flex; flex-direction: column; gap: 6px; color: var(--white); }
.hab-name b { font-weight: 600; font-size: 12px; line-height: 15px; letter-spacing: 0.2px; }
.hab-name i { font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.2px; opacity: 0.8; }
.logo-card p {
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.36px;
  color: rgba(255, 255, 255, 0.92);
}

.icons-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.icon264 { position: relative; width: 264px; height: 264px; flex-shrink: 0; }
.icon264-bg {
  position: absolute;
  inset: 0;
  background: var(--black);
  border-radius: 103.03px;
  transition: background 0.25s ease;
}
.icon264 > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 62px; box-sizing: border-box; }
.icon264-flat > img { padding: 0; }
/* Ծիրան's big icon is its bare glyph (icon-ciran-glyph*.svg) on the same
   tile as the others; its original SVGs have the tile baked in, which a
   phone's lighter tile (below) couldn't restyle. */

.icon264-syunar .syu-p { position: absolute !important; z-index: 1; padding: 0 !important; object-fit: fill; }
.icon264-syunar .syu-p1 { top: 131.6px; left: 128.2px; width: 79.4px; height: 67.7px; }
.icon264-syunar .syu-p2 { top: 69.7px; left: 133.7px; width: 68.4px; height: 52.9px; }
.icon264-syunar .syu-p3 { top: 132.5px; left: 58.2px; width: 65.2px; height: 65.2px; }
.icon264-syunar .syu-p4 { top: 64.7px; left: 57.1px; width: 65.6px; height: 58.2px; }

/* ── Anahit showcase section ────────────────────────────────── */
.anahit-section {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The design's spacing (256:1568): the heading row starts at 160, the
     photo grid 29 under it, 46 left at the bottom — a 764px grid on a
     1920×1080 screen. On a shorter one script.js gives up top padding
     first (down to 110), and only then height from the grid. */
  gap: 29px;
  padding: 160px 80px 46px;
  /* visible, not hidden — height below is deliberately smaller than the
     natural content (for correct document flow/scroll height); hidden
     would clip that content in its own pre-transform coordinate space
     before the shrink below ever gets applied. */
  overflow: visible;
  transform-origin: top center;
  box-sizing: border-box;
}

.anahit-head {
  /* Columns start where the design puts them: title at x80, first
     subtitle at x592, second at x1106, the buttons flush right. */
  display: grid;
  grid-template-columns: 512px 514px 1fr auto;
  align-items: end;
  width: 100%;
}

.anahit-title {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.36;
  letter-spacing: 0.64px;
  color: var(--white);
  /* Always two lines tall. Project names differ in length (Ծիրան թաղամաս
     wraps, ԱՄԱՍ doesn't); if the heading row changed height on a switch,
     the browser's scroll anchoring shifted the page to compensate and the
     icon row above slid into view. */
  min-height: 2.72em;
  /* A one-line name sits on the row's baseline, as in the design. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.anahit-lead {
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: var(--white);
  grid-column: 2;
  width: var(--lead-w, 183px);
}

.anahit-desc {
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: var(--white);
  grid-column: 3;
  width: var(--desc-w, 277px);
}

/* Hidden on request (2026-09-21) until the projects' sites are ready; the
   markup stays so it can come back by deleting the display:none below. */
.anahit-visit { display: none !important; }
.anahit-visit {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 4;
  margin-bottom: 6px;
}
.av-text {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 4px 24px;
  border-radius: 24px;
  background: var(--gray-main);
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.28px;
  color: rgba(0, 15, 21, 0.85);
  white-space: nowrap;
}
.av-arrow {
  display: flex;
  align-items: center;
  padding: 4px 24px;
  border-radius: 24px;
  background: var(--gray-main);
}
.av-arrow img { width: 24px; height: 24px; }

.anahit-grid { display: flex; align-items: stretch; justify-content: space-between; width: 100%; gap: 8px; }

/* ── Photo grid — one photo cut into nine tiles (design "puzzle").
   script.js lays the photo across the whole grid without distortion and
   swaps it when a card in the slider is clicked. The --selected rule on
   .g-front below is only the first paint, before the script runs. ──── */
.gallery-grid {
  --selected: url('../images/anahit-photo.webp');
  --gap: 4px;
  width: 1526px;
  height: 852px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
  border-radius: 32px;
  overflow: hidden;
  perspective: 2400px;
}

.g-tile {
  position: relative;
  display: block;
}
.g-tile:nth-child(1) { --x: 0%; --y: 0%; }
.g-tile:nth-child(2) { --x: 50%; --y: 0%; }
.g-tile:nth-child(3) { --x: 100%; --y: 0%; }
.g-tile:nth-child(4) { --x: 0%; --y: 50%; }
.g-tile:nth-child(5) { --x: 50%; --y: 50%; }
.g-tile:nth-child(6) { --x: 100%; --y: 50%; }
.g-tile:nth-child(7) { --x: 0%; --y: 100%; }
.g-tile:nth-child(8) { --x: 50%; --y: 100%; }
.g-tile:nth-child(9) { --x: 100%; --y: 100%; }

.g-inner {
  position: absolute;
  inset: 0;
}
.g-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  border-radius: 30px;
}
/* One photo across the nine tiles; a card click in the slider fades the
   next one in (script.js). */
.g-front {
  background-image: var(--selected);
  background-size: 300% 300%;
  background-position: var(--x) var(--y);
  /* script.js gives each tile a second face: the new photo fades in on it,
     over the old one. */
  transition: opacity 0.6s ease;
}

/* A looping vertical slider (design 256:1622): three cards, with a ~10px
   sliver of the card before and after. The window is exactly as tall as
   the photo grid — top and bottom level with it — and the slivers sit
   inside it. (The design lets the window reach 15px past the grid instead;
   on the page that read as the column being taller than the photos.)
   Because the sliver above the first card is the last one, it loops:
   script.js wraps the cards in a moving track, duplicates them once, and
   rotates them as it slides. */
.anahit-highlights {
  position: relative;
  width: 222px;
  flex-shrink: 0;
  overflow: hidden;
  text-align: right;
}
.hl-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.5s cubic-bezier(.65, 0, .35, 1), opacity 0.25s ease;
}
.hl-track.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hl-track { transition: none; }
}

.hl-card {
  background: var(--cards-bg);
  border-radius: 32px;
  /* What's left of the grid's height after the two slivers, in thirds
     (script.js): ~243px at the design size, never below 210 — the longest
     text (Շենքեր) needs 190 plus padding. */
  flex: 0 0 var(--hl-card-h, 243px);
  width: 100%;
  /* Clicking a card shows its photo in the grid (script.js). */
  cursor: pointer;
  /* 10px, not the design's 24, top and bottom: the text is centred, so on
     a full-size card it sits where 24 would put it, and on a short screen
     it still fits. */
  padding: 10px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.hl-info { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: 178px; }
/* Design: Montserrat arm. Montserrat has no Armenian glyphs, so Latin (en)
   is set in it and Armenian falls through to Noto Sans Armenian. */
.hl-title { font-family: 'Montserrat', 'Noto Sans Armenian', sans-serif; font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: 0.28px; }
.hl-desc { font-family: 'Montserrat', 'Noto Sans Armenian', sans-serif; font-weight: 300; font-size: 12px; line-height: 20px; letter-spacing: 0.24px; }
/* Areas (Ծիրան: "141.0 – 182.1 քմ") and a bulleted list, dots on the right
   as in the design (265:2134). */
.hl-meta { font-family: 'Montserrat', 'Noto Sans Armenian', sans-serif; font-weight: 300; font-size: 12px; line-height: 20px; letter-spacing: 0.24px; }
.hl-list { list-style: none; margin: 0; padding: 0; }
.hl-list li {
  font-family: 'Montserrat', 'Noto Sans Armenian', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 23px;
  letter-spacing: 0.24px;
}
.hl-list li::after { content: '•'; margin-left: 8px; }

/* Switching project (script.js): the name, its two lines and the cards
   fade out, change, and fade back in; the photo dissolves on its own. */
.anahit-title, .anahit-lead, .anahit-desc { transition: opacity 0.25s ease; }
.anahit-section.project-switching .anahit-title,
.anahit-section.project-switching .anahit-lead,
.anahit-section.project-switching .anahit-desc,
.anahit-section.project-switching .hl-track { opacity: 0; }

/* ── Contact overlay ─────────────────────────────────────────── */
/* Opens where you are, not on the first screen. The block is pinned to the
   top of the window and slides down from it, and the screen you were on
   slides down by the same amount (main's transform, below) — so it still
   pushes the page rather than covering it, on every screen, not just at the
   top. It used to be an in-flow block above the hero, which is why opening
   it had to scroll all the way up first.
   grid-template-rows 0fr → 1fr is the standard trick for animating to an
   unknown content height (plain `height` can't transition to/from `auto`). */
.contact-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  /* Opaque, as in the design (454:9880, var(--black)). It must be: with the
     page pushed down, whatever sat just above the current screen slides
     into the band behind this block, and a transparent one shows it. */
  background: var(--black);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(.65, 0, .35, 1);
}
/* Closed, it still sits over the header (its padding keeps a thin empty
   strip) — it must not swallow clicks meant for the logo and buttons. */
.contact-overlay:not(.open) {
  pointer-events: none;
}
.contact-overlay.open {
  grid-template-rows: 1fr;
}
/* The push. --contact-push is the block's full height, set by script.js
   when it opens. Same duration and easing as the block itself, so the two
   move as one. main holds nothing position:fixed, so the transform can't
   unpin anything. */
main {
  transition: transform 0.5s cubic-bezier(.65, 0, .35, 1);
}
body.contact-open main {
  transform: translateY(var(--contact-push, 0px));
}
.contact-overlay-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* No padding here: this is the box that collapses to height 0, and
     padding can't collapse — it left a 57px black strip over the header
     with the tops of the cards showing. The Figma spacing (48 above the
     cards, 24 below the Logo/Կապ/ENG row) sits on the children instead. */
}
.contact-overlay-inner > .contact-body { padding-top: 48px; }
.contact-overlay-inner > .site-header-inner { padding-bottom: 48px; }
/* Keep the parts at their natural height while the block is collapsed —
   clipped by the overflow, not squashed. Otherwise the height script.js
   reads before opening (to push the page by) comes out far too small. */
.contact-overlay-inner > * {
  flex-shrink: 0;
}
.contact-body {
  display: flex;
  align-items: center;
  /* `safe`: if the row were ever wider than the window, overflow to the
     right only. Plain `center` spills both ways, and the part hanging off
     the left edge can't be scrolled back to — that clipped the map. */
  justify-content: safe center;
  overflow: hidden;
}

/* Four fixed cards, ~1801px on the 1920 canvas (Figma 454:9833). Narrower
   windows are handled by the page zoom set in <head>, like everything else. */
.contact-cards { display: flex; align-items: stretch; gap: 8px; flex-shrink: 0; }

.cc-map {
  display: block;
  width: 510px;
  height: 290px;
  flex-shrink: 0;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}
.cc-map::after { content: ''; position: absolute; inset: 0; background: rgba(0, 15, 21, 0.41); }
.cc-map img { width: 100%; height: 100%; object-fit: cover; }

.cc-info {
  width: 510px;
  height: 290px;
  flex-shrink: 0;
  background: var(--cards-bg);
  border-radius: 32px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  /* Heading with the items 33px under it, at the top (454:9886). Was
     space-between while LinkedIn sat at the bottom of this card. */
  justify-content: flex-start;
}

.cc-heading { font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: 0.56px; color: var(--white); }

.cc-items { display: flex; flex-direction: column; gap: 12px; margin-top: 33px; }
.cc-item { display: flex; align-items: center; gap: 8px; }
.cc-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cc-icon img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.cc-item a, .cc-item span { font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: 0.36px; color: var(--white); }

.cc-form {
  width: 510px;
  height: 290px;
  flex-shrink: 0;
  background: var(--cards-bg);
  border-radius: 32px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
}
.cc-form form { width: 100%; display: flex; flex-direction: column; gap: 34px; }
.cc-form-fields-wrap { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; width: 100%; }
.cc-form-fields { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.cc-form-left { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-form input, .cc-form textarea {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-family: 'Noto Sans Armenian', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.28px;
  color: var(--white);
  width: 100%;
}
.cc-form input::placeholder, .cc-form textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
.cc-form textarea { width: 254px; flex-shrink: 0; resize: none; height: auto; min-height: 100%; padding: 12px 16px; }
.cc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cc-form input.invalid { box-shadow: inset 0 0 0 1px #e5484d; }
.cc-send:disabled { opacity: 0.6; cursor: default; }
.cc-send {
  align-self: flex-end;
  text-align: center;
  background: var(--black);
  padding: 8px 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.26px;
  color: var(--white);
}

/* The collaboration line, with LinkedIn under it — LinkedIn moved here
   from the contact-details card in the design (454:9918). */
.cc-collab {
  flex-shrink: 0;
  background: var(--cards-bg);
  border-radius: 32px;
  height: 290px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 68px;
  padding: 24px;
}
.cc-collab .cc-item { width: 100%; }
.cc-collab p {
  width: 199px;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.32px;
  color: var(--white);
  text-align: left;
}


/* No narrow-window fallback. A window under 1920 gets the 1920 layout
   scaled down (page zoom, see <head>), so the 1920 margins must hold there
   too. The 40px-margin rule that used to live here fired on a 14" screen
   and widened everything — the logo pulled to the edge and the gallery
   drifted away from its card column. */

/* ── Phone (under 768) ─────────────────────────────────────────────
   Its own layout, drawn for a 402 screen: first screen 283:3152, About
   with the icons 283:3374, contact 287:6062. The page zoom is off here
   (see <head>), so these are real pixels. The project section has no
   phone frame yet — it is stacked: heading, photo, cards in a row that
   scrolls sideways. */
@media (max-width: 767px) {
  /* Header: logo 66×36, a small Կապ pill and ENG, 16 from the edges. The
     design's header is see-through, but on a phone the page scrolls right
     under it and the icons ran into the logo — so it takes the page colour. */
  .site-header { background: rgba(0, 15, 21, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .site-header-inner { padding: 12px 16px; }
  .logo { width: 66px; height: 36px; }
  .header-actions { gap: 6px; }
  .header-actions .btn-pill {
    height: 34px;
    padding: 0 8px;
    border-radius: 26px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.28px;
  }
  .header-actions .btn-lang { padding: 0 7px; font-size: 12px; letter-spacing: 0; }
  /* The project icons: on a phone they don't fit beside the logo, so the
     bar opens under the header row instead — the same bar and animation as
     on the desktop, scaled to 78% (six 44px icons, ~370 wide). zoom scales
     `top` with it: 77 × 0.78 ≈ 60, right under the header row. */
  .header-icons-sticky { zoom: 0.786; top: 86.5px; gap: 23px; border-radius: 0 !important; }
  .header-icons-sticky .hicon-bg { border-radius: 50%; }
  .header-icons-sticky .hicon-flat img { border-radius: 50%; }

  /* First screen: the wordmark across the width, the tagline under it. */
  .hero { min-height: 100svh; padding: 0 16px 88px; }
  .hero-content { gap: 16px; }
  .hero-tagline { max-width: none; width: 44%; }

  /* About: two cards and the icons, 12 apart. */
  .main-container { gap: 12px; padding: 72px 16px 48px; }
  .top-container { flex-direction: column; align-items: stretch; gap: 12px; }
  .v-divider { display: none; }
  .about-card, .logo-card { width: auto; border-radius: 16px; padding: 24px; }
  .about-card { gap: 8px; }
  .about-card h2 { font-size: 24px; line-height: 32px; letter-spacing: 0; }
  .about-text p, .logo-card p { font-size: 14px; line-height: 22px; letter-spacing: 0.28px; }
  .logo-card { gap: 16px; }
  .hab-logo { max-width: 100%; height: auto; }

  .icons-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .icon264 { width: auto; height: auto; aspect-ratio: 1; }
  .icon264-bg {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 32px;
  }
  .icon264 > img { padding: 27%; }
  /* Ծիրան's glyph carries its own margin; 6% brings it to the design's 47%. */
  .icon264-flat > img { padding: 6%; }
  .icon264-syunar .syu-p1 { top: 49.87%; left: 48.76%; width: 25.87%; height: 22.05%; }
  .icon264-syunar .syu-p2 { top: 29.71%; left: 50.55%; width: 22.28%; height: 17.23%; }
  .icon264-syunar .syu-p3 { top: 50.16%; left: 25.96%; width: 21.24%; height: 21.24%; }
  .icon264-syunar .syu-p4 { top: 28.08%; left: 25.6%; width: 21.37%; height: 18.96%; }

  /* Project section, one screen (the phone frames «iPhone 17 - 14», «- 17»):
     the icon bar, the name on one line, the photo filling what's left, and
     under it a row of cards, three in view, that scrolls sideways. No
     subtitles, no «Այցելել կայք». dvh follows Safari's bars, so the row of
     cards is never under them. */
  .anahit-section {
    height: 100dvh;
    min-height: 560px;
    gap: 16px;
    padding: 136px 16px 12px;
  }
  .anahit-head { display: block; }
  .anahit-title { font-size: 24px; min-height: 0; display: block; white-space: nowrap; }
  .anahit-title br { display: none; }
  .anahit-lead, .anahit-desc { display: none; }
  .anahit-grid { flex: 1; min-height: 0; flex-direction: column; gap: 8px; }
  .gallery-grid { width: 100%; height: auto; flex: 1; min-height: 0; border-radius: 16px; }
  .g-face { border-radius: 12px; }
  /* Edge to edge, out of the page margin (script.js keeps it looping). */
  .anahit-highlights {
    width: auto;
    margin: 0 -16px;
    height: 151px !important;
    flex-shrink: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
    text-align: left;
  }
  .anahit-highlights::-webkit-scrollbar { display: none; }
  .hl-track { flex-direction: row; gap: 4px; height: 100%; transform: none !important; }
  /* Three whole cards between the 16px margins, and in the 12px left at
     each edge a sliver of the card before and after. */
  .hl-card {
    flex: 0 0 calc((100% - 40px) / 3);
    height: 100%;
    border-radius: 12px;
    padding: 10px 8px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    scroll-snap-align: start;
  }
  /* Every word stays whole in view: one too long for the card breaks onto
     the next line, as in the frame («Ենթակառուցված / քներ»). */
  .hl-info { width: 100%; min-width: 0; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; }
  .hl-title { font-family: 'Noto Sans Armenian', sans-serif; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.2px; }
  .hl-desc, .hl-meta, .hl-list li { font-size: 8px; line-height: 10px; letter-spacing: 0.16px; }
  .hl-list li::after { content: none; }
  .hl-list li::before { content: '•'; margin-right: 4px; }

  /* Contact: a full screen that slides down from the top and scrolls
     inside itself — the page isn't pushed. Its own Logo/Կապ/ENG row goes
     first, as the header; then map, form, details, collaboration. */
  .contact-overlay {
    bottom: 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(.65, 0, .35, 1), visibility 0s 0.5s;
  }
  .contact-overlay.open {
    transform: none;
    visibility: visible;
    transition: transform 0.5s cubic-bezier(.65, 0, .35, 1);
  }
  body.contact-open main { transform: none; }
  .contact-overlay-inner { overflow: visible; }
  .contact-overlay-inner > .site-header-inner { order: -1; padding-bottom: 12px; }
  .contact-overlay-inner > .contact-body { padding: 0 16px 24px; }
  .contact-body { overflow: visible; }
  .contact-cards { flex-direction: column; width: 100%; flex-shrink: 1; }
  .cc-map { order: 1; width: auto; height: 149px; border-radius: 16px; }
  .cc-form { order: 2; }
  .cc-info { order: 3; }
  .cc-collab { order: 4; }
  .cc-form, .cc-info, .cc-collab { width: auto; height: auto; border-radius: 16px; padding: 16px; }
  .cc-heading { font-weight: 600; font-size: 20px; line-height: 32px; letter-spacing: 0; }
  .cc-form form { gap: 12px; }
  .cc-form-fields { flex-direction: column; gap: 12px; }
  .cc-form-left { gap: 12px; }
  .cc-form input { height: 40px; padding: 0 16px; border-radius: 8px; }
  .cc-form textarea { width: 100%; height: 116px; min-height: 0; border-radius: 8px; }
  .cc-form-fields-wrap { align-items: stretch; }
  .cc-send {
    align-self: stretch;
    height: 40px;
    padding: 8px 24px;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.32px;
  }
  .cc-items { margin-top: 16px; }
  .cc-icon { width: 24px; height: 24px; }
  .cc-item a, .cc-item span { font-size: 16px; line-height: 24px; letter-spacing: 0.32px; }
  .cc-collab { align-items: stretch; justify-content: flex-start; gap: 12px; padding: 20px 16px; }
  .cc-collab p { width: auto; font-size: 14px; letter-spacing: 0.28px; }
  .cc-collab .cc-item { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
}