/* Sarerin, the new website (sarerin.com/journey): real photographs of Armenia's mountains with their names and heights,
   and the app's own phones (phones.css). The home walks from one photo to the next as one scrolls, the altitude climbing;
   every other page opens on a photo and goes on, on paper, with what the app does. Movement everywhere but for who asks
   for less of it. Fonts: the website's own Inter, and Noto Sans Armenian for Armenian letters. */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/assets/fonts/Inter-400.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/assets/fonts/Inter-500.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/assets/fonts/Inter-600.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/assets/fonts/Inter-700.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(/assets/fonts/Inter-800.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/NotoSansArmenian-400.ttf) format("truetype"); unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: Inter; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/NotoSansArmenian-600.ttf) format("truetype"); unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(/assets/fonts/NotoSansArmenian-800.ttf) format("truetype"); unicode-range: U+0530-058F, U+FB13-FB17; }

:root {
  --paper: #F6F3EC; --paper-2: #ECE7DC; --card: #FFFFFF; --ink: #14202B; --muted: #5A6470; --line: rgba(20, 32, 43, .12);
  --navy: #0B2A4A; --accent: #1E5AA8; --sun: #F5A524; --clay: #D9534F; --night: #091119; --night-2: #101B26;
  --easy-bg: #E3F2E4; --easy-fg: #256B2B; --mod-bg: #FDEFD3; --mod-fg: #8A5A00; --hard-bg: #FADCDB; --hard-fg: #9E2A27;
  --shadow: 0 2px 6px rgba(15, 30, 45, .05), 0 18px 44px -18px rgba(15, 30, 45, .22);
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.7, 0, .2, 1);
  --gut: clamp(20px, 5vw, 72px); --wrap: 1240px; --bar-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: #fff; overflow-x: clip;
  font: 400 17px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
body[data-page]:not([data-page="home"]) { background: var(--paper); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }

/* one language at a time: every text is written in both */
html.hy body [lang="en"], html:not(.hy) body [lang="hy"] { display: none !important; }

/* ---------- the bar, the menu ---------- */
.bar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 20px;
  padding: 0 var(--gut); color: #fff; transition: height .35s var(--ease), background .35s, color .35s, box-shadow .35s;
}
.scrolled .bar { height: 62px; background: rgba(9, 17, 25, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
/* a page's paper under the bar: the bar turns to paper too */
.on-paper .bar { background: rgba(246, 243, 236, .86); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.links { display: flex; gap: 2px; margin-left: auto; }
.links a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; opacity: .86; transition: opacity .2s, background .2s; }
.links a:hover, .links a.on { opacity: 1; background: color-mix(in srgb, currentColor 13%, transparent); }
.tools { display: flex; gap: 8px; }
.lang, .menu-btn {
  height: 42px; min-width: 42px; padding: 0 14px; border: 0; border-radius: 999px; font: 700 13.5px Inter, sans-serif; color: inherit; cursor: pointer;
  background: color-mix(in srgb, currentColor 14%, transparent); display: inline-flex; align-items: center; justify-content: center;
}
.menu-btn { display: none; padding: 0; }
.menu {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(8, 15, 24, .97); color: #fff;
  clip-path: circle(0 at calc(100% - 46px) 38px); transition: clip-path .7s var(--ease-io); visibility: hidden;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - 46px) 38px); visibility: visible; }
html.menu-open { overflow: hidden; }
.menu-close { position: absolute; top: 17px; right: 20px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.menu nav { display: grid; gap: 6px; padding: 0 28px; }
.menu nav a { font-size: clamp(32px, 9vw, 58px); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; text-decoration: none; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s var(--ease); }
.menu-open .menu nav a { opacity: 1; transform: none; }
.menu nav a:nth-child(2) { transition-delay: .05s; } .menu nav a:nth-child(3) { transition-delay: .1s; } .menu nav a:nth-child(4) { transition-delay: .15s; }
.menu nav a:nth-child(5) { transition-delay: .2s; } .menu nav a:nth-child(6) { transition-delay: .25s; }

/* ---------- type, buttons ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .7; }
html.hy .eyebrow { letter-spacing: .04em; }
.display { font-size: clamp(46px, 7.2vw, 112px); font-weight: 800; line-height: .94; letter-spacing: -.045em; }
html.hy .display { font-size: clamp(36px, 5.4vw, 86px); line-height: 1.04; letter-spacing: -.02em; }
.h2 { font-size: clamp(34px, 4.6vw, 66px); font-weight: 800; line-height: 1; letter-spacing: -.038em; }
html.hy .h2 { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.015em; }
.lead { max-width: 600px; margin-top: 24px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; opacity: .92; }
.kicker { display: block; margin-bottom: 16px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
html.hy .kicker { letter-spacing: .04em; }
.muted { color: var(--muted); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 15.5px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45); }
.btn .i { transition: transform .25s var(--ease); }
.btn:hover .i { transform: translateX(4px); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent); }
.btn.dark { background: var(--ink); color: #fff; }

/* things that come in: a block (data-reveal), a heading word by word (data-split, journey.js) */
html.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
html.js [data-reveal].in { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; transform: translateY(112%); transition: transform 1.05s var(--ease); }
[data-split].in .w > span, html:not(.js) .w > span { transform: none; }

/* ---------- a photo that covers its box (journey.js sizes .frame to the photo's own shape, keeps its focus in view and
   zooms it), and the names and heights of the peaks on it ---------- */
.photo { position: absolute; inset: 0; overflow: hidden; background: var(--night-2); }
.frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); user-select: none; -webkit-user-drag: none; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.peaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.peak {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center;
  opacity: 0; transition: opacity .6s var(--ease); white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.peak.on { opacity: 1; }
.peak b { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html.hy .peak b { letter-spacing: .03em; }
.peak small { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.peak .stem { width: 1.5px; height: 44px; margin-top: 6px; background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .85)); }
.peak.below { flex-direction: column-reverse; }
.peak.below .stem { margin: 0 0 6px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .15)); }
.peak .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 0 14px rgba(0, 0, 0, .4); }
.credit { font-size: 11.5px; line-height: 1.35; opacity: .72; }
.credit a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 2px; }

/* ---------- the home: the intro, the photos one after another, the altitude ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--night); color: #fff; clip-path: inset(0); animation: intro-out 1.1s var(--ease-io) 1.7s forwards; }
.intro-in { text-align: center; }
.intro-mark { display: block; font-size: clamp(58px, 11vw, 150px); font-weight: 800; letter-spacing: -.05em; line-height: 1; animation: rise 1s var(--ease) both; }
.intro-sub { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; opacity: .7; animation: rise 1s var(--ease) .25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(34px); } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); } }
html:not(.js) .intro, .intro.gone { display: none; }

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--night); }
.shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.shot.vis { visibility: visible; }
html:not(.js) .shot:first-child { opacity: 1; visibility: visible; }
.stage .shade {
  background:
    linear-gradient(90deg, rgba(6, 11, 17, .74) 0%, rgba(6, 11, 17, .42) 34%, rgba(6, 11, 17, .06) 60%, rgba(6, 11, 17, 0) 100%),
    linear-gradient(180deg, rgba(6, 11, 17, .5) 0%, rgba(6, 11, 17, 0) 20%, rgba(6, 11, 17, 0) 66%, rgba(6, 11, 17, .7) 100%);
}

.space { position: relative; z-index: 2; height: 210vh; }
.space:first-of-type { height: 170vh; }
.pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 48px; padding: var(--bar-h) var(--gut) 132px;
}
.copy { max-width: 640px; }
.space .copy > * { transition: opacity .6s var(--ease); }
html.js .space:not(.in) .copy > * { opacity: 0; }
.hold { margin-right: clamp(0px, 5vw, 90px); opacity: 0; transform: translateY(46px) scale(.95); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.hold .phone { --s: .92; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), inset 0 0 0 2px #2A3038; }
.space.in .hold, html:not(.js) .hold { opacity: 1; transform: none; }
.facts-row { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 30px; }
.facts-row b { display: block; font-size: clamp(36px, 4vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts-row span { display: block; margin-top: 6px; font-size: 14px; opacity: .8; }
.scroll-hint { position: absolute; left: var(--gut); bottom: 150px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.scroll-hint i { width: 1.5px; height: 44px; background: currentColor; transform-origin: top; animation: hint 2.2s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* the first place in 3D (hero3d.js): the mountain drawn from its real heights over its photo, once it draws; walked as one
   scrolls a long first space. Walking, the words step aside and where and how far shows; on the top, the summit. */
.terrain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.terrain-on .terrain { opacity: 1; }
.terrain-on .shot[data-k="0"] .peaks:not(.summits) { display: none; }
.summits { z-index: 1; }
.space.hero3d { height: 560vh; }
.stage .shade { transition: opacity .8s var(--ease); }
.hero-walking .stage .shade { opacity: .4; }
.space.hero3d .copy > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero-walking .space.hero3d .copy > * { opacity: 0 !important; transform: translateY(-16px); pointer-events: none; }
.hero-walking .scroll-hint { opacity: 0; transition: opacity .4s; }
.walk-note { position: absolute; left: var(--gut); bottom: 128px; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); pointer-events: none; }
.hero-walking .walk-note { opacity: 1; transform: none; }
.walk-note > b { display: block; font-size: 16px; font-weight: 700; }
.walk-note > span { display: block; margin-top: 2px; font-size: 13.5px; opacity: .85; }
.walk-note [data-hero-km] { font-weight: 800; font-variant-numeric: tabular-nums; }
.summit-note { position: absolute; left: 50%; top: 60%; text-align: center; opacity: 0; transform: translate(-50%, -40%) scale(.96); transition: opacity .8s var(--ease), transform .9s var(--ease); pointer-events: none; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); white-space: nowrap; }
.hero-summit .summit-note { opacity: 1; transform: translate(-50%, -50%); }
/* the 3D walk's pictures and heights: whose they are, in the corner */
.terrain-credit { position: absolute; right: var(--gut); bottom: 8px; margin: 0; font-size: 10.5px; opacity: 0; transition: opacity .6s; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.terrain-credit a { text-decoration: none; }
.terrain-on .terrain-credit { opacity: .7; }
.summit-note > span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
html.hy .summit-note > span { letter-spacing: .04em; }
.summit-note > b { display: block; margin-top: 6px; font-size: clamp(64px, 10vw, 136px); font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.summit-note > small { display: block; margin-top: 12px; font-size: 14.5px; opacity: .88; white-space: normal; }

/* where the walk is: the altitude, the place, and the way so far (the six places' real heights, a dot walking on it) */
.hud { position: fixed; z-index: 20; left: var(--gut); right: var(--gut); bottom: 28px; display: flex; align-items: flex-end; gap: 28px; pointer-events: none; }
.hud .alt b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.hud .alt span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
html.hy .hud .alt span { letter-spacing: .03em; }
.where { position: relative; min-width: 280px; height: 46px; }
.where > div { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); white-space: nowrap; }
.where > div.on { opacity: 1; transform: none; }
.where b { display: block; font-size: 15px; font-weight: 700; }
.where > div > span { display: block; margin-top: 2px; font-size: 12.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.way { margin-left: auto; width: min(440px, 34vw); }
.way svg { width: 100%; height: 70px; overflow: visible; }
.way .line { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-dasharray: 3 4; }
.way .done { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.way .stop { fill: rgba(9, 17, 25, .85); stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; }
.way .stop.on { fill: #fff; }
.way .me { fill: var(--sun); stroke: #fff; stroke-width: 2.5; }
.way text { fill: #fff; font: 700 10.5px Inter, sans-serif; opacity: .55; text-anchor: middle; font-variant-numeric: tabular-nums; transition: opacity .4s; }
.way text.on { opacity: 1; }

/* ---------- a page: the photo at the top, then paper ---------- */
.hero { position: relative; height: 92vh; height: 92svh; min-height: 560px; overflow: hidden; background: var(--night); color: #fff; }
.hero .shade {
  background:
    linear-gradient(180deg, rgba(6, 11, 17, .55) 0%, rgba(6, 11, 17, 0) 24%, rgba(6, 11, 17, 0) 46%, rgba(6, 11, 17, .8) 100%),
    linear-gradient(90deg, rgba(6, 11, 17, .45) 0%, rgba(6, 11, 17, 0) 60%);
}
.hero-in { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(56px, 10vh, 110px); max-width: 900px; }
.hero .credit { position: absolute; right: var(--gut); bottom: 18px; max-width: 46%; text-align: right; }
.hero .place { position: absolute; left: var(--gut); bottom: 18px; font-size: 12px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }

.sec { padding: clamp(76px, 10vw, 140px) 0; }
.sec.alt { background: var(--paper-2); }
.sec.dark { background: var(--night); color: #fff; }
.sec.dark .muted { color: rgba(255, 255, 255, .7); }
.sec.dark .kicker { color: #8FB8FF; }
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .lead, .split .lead { opacity: 1; color: var(--muted); }
.sec.dark .sec-head .lead, .sec.dark .split .lead { color: rgba(255, 255, 255, .72); }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.split.flip > :first-child { order: 2; }
.phone-spot { position: relative; display: grid; place-items: center; padding: 30px 0; }
.phone-spot::before { content: ""; position: absolute; width: min(480px, 92%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%); }
.sec.dark .phone-spot::before { background: radial-gradient(circle, rgba(143, 184, 255, .22), transparent 68%); }
.phone-spot .phone { --s: .95; }

/* the list of what it does: an icon, a title, a line */
.ticks { list-style: none; display: grid; gap: 22px; margin: 36px 0 0; padding: 0; }
.ticks li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.ticks .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--card); color: var(--accent); box-shadow: var(--shadow); }
.sec.alt .ticks .ic { box-shadow: none; }
.sec.dark .ticks .ic { background: rgba(255, 255, 255, .08); color: #8FB8FF; box-shadow: none; }
.ticks b { display: block; font-size: 17px; }
.ticks span { display: block; margin-top: 2px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.sec.dark .ticks span { color: rgba(255, 255, 255, .7); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--mod-bg); color: var(--mod-fg); font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 2px; }
.tag.blue { background: #DCE8F8; color: #1B4F9C; }

/* big numbers in a row */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div { padding: 30px 26px 28px 0; }
.facts > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.facts b { display: block; font-size: clamp(38px, 4.6vw, 68px); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }
.facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec.dark .facts, .sec.dark .facts > div + div { border-color: rgba(255, 255, 255, .14); }
.sec.dark .facts span { color: rgba(255, 255, 255, .7); }

/* cards */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--card); border-radius: 22px; padding: 28px 26px; box-shadow: var(--shadow); }
.card .ic { width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); color: var(--accent); }
.card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.card p { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.sec.dark .card { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sec.dark .card .ic { background: rgba(255, 255, 255, .08); color: #8FB8FF; }
.sec.dark .card p { color: rgba(255, 255, 255, .7); }

/* steps, numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { position: relative; padding: 70px 24px 26px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 24px; top: 22px; color: var(--accent); font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.steps h3 { font-size: 18.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.steps p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sec.dark .steps li { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sec.dark .steps li::before { color: #8FB8FF; }
.sec.dark .steps p { color: rgba(255, 255, 255, .7); }

/* tables: the levels, the emergency numbers */
.table-card { background: var(--card); border-radius: 22px; padding: 6px 8px; box-shadow: var(--shadow); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th, .table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table th { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.table td b { font-weight: 800; }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lvl { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--paper); color: var(--accent); font-weight: 800; }
.bar-km { height: 6px; border-radius: 9px; background: var(--paper-2); overflow: hidden; min-width: 110px; }
.bar-km i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plan { border-radius: 26px; padding: 34px 32px; background: var(--card); box-shadow: var(--shadow); }
.plan.pro { background: var(--navy); color: #fff; }
.plan h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.plan .price { margin-top: 6px; font-size: 15px; opacity: .75; }
.plan ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; }
.plan li .i { width: 20px; height: 20px; color: #2FA86A; margin-top: 2px; }
.plan.pro li .i { color: var(--sun); }

/* questions */
.faq { display: grid; gap: 10px; max-width: 900px; }
.faq details { border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-size: 17px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 20px; font-weight: 600; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* a band with a photo behind: the way to the app */
.band { position: relative; overflow: hidden; border-radius: 30px; min-height: 480px; color: #fff; display: grid; align-items: end; isolation: isolate; }
.band .photo { z-index: -1; }
.band .shade { background: linear-gradient(90deg, rgba(6, 11, 17, .82) 0%, rgba(6, 11, 17, .35) 60%, rgba(6, 11, 17, .12) 100%); }
.band-in { position: relative; padding: clamp(32px, 5vw, 64px); max-width: 720px; }
.band .credit { position: absolute; right: 22px; bottom: 16px; max-width: 50%; text-align: right; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-radius: 16px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-weight: 700; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.store small { display: block; font-size: 11px; font-weight: 600; opacity: .75; }
.store .i { width: 24px; height: 24px; }

/* ---------- the trails ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chips button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14.5px Inter, sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s; }
.chips button.on { background: var(--ink); color: #fff; box-shadow: none; }
.chips .n { margin-left: 6px; opacity: .55; }
.trails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.trail-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.trail-card:hover { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(15, 30, 45, .05), 0 30px 60px -24px rgba(15, 30, 45, .35); }
.trail-card[hidden] { display: none; }
.tc-map { position: relative; aspect-ratio: 2 / 1; background: #E7EEE2; overflow: hidden; }
.tc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-map .grid-l { stroke: rgba(37, 107, 43, .1); stroke-width: 1; }
.tc-map .under { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.tc-map .route { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
html.js .tc-map .route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
html.js .trail-card.in .route { stroke-dashoffset: 0; }
.tc-map .start { fill: var(--sun); stroke: #fff; stroke-width: 3; }
.tc-map .diff { position: absolute; left: 14px; top: 14px; }
.tc-map .north { position: absolute; right: 14px; top: 12px; font-size: 11px; font-weight: 800; color: rgba(37, 107, 43, .55); }
.diff { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.diff.easy { background: var(--easy-bg); color: var(--easy-fg); } .diff.moderate { background: var(--mod-bg); color: var(--mod-fg); } .diff.hard { background: var(--hard-bg); color: var(--hard-fg); }
.tc-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.tc-area { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.hy .tc-area { letter-spacing: .02em; }
.tc-body h3 { margin-top: 6px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tc-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.tc-facts b { color: var(--ink); font-weight: 800; }
.tc-about { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tc-profile { position: relative; margin-top: 18px; padding-bottom: 18px; }
.tc-profile svg { width: 100%; height: 56px; }
.tc-profile .fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.tc-profile .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tc-profile .hi, .tc-profile .lo { position: absolute; font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tc-profile .hi { right: 0; top: -16px; } .tc-profile .lo { left: 0; bottom: 0; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tc-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--paper); font-size: 12.5px; font-weight: 600; }
.tc-tags .i { width: 14px; height: 14px; color: var(--accent); }
.tc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; }
.tc-foot .stars { display: inline-flex; align-items: center; gap: 5px; }
.tc-foot .stars .i { width: 16px; height: 16px; color: var(--sun); fill: var(--sun); }
.tc-foot .go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }

/* ---------- the group hikes ---------- */
.hikes { display: grid; gap: 12px; }
.hike { display: flex; align-items: center; gap: 24px; padding: 20px 26px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .3s var(--ease); }
.hike:hover { transform: translateX(6px); }
.when { flex: none; width: 66px; text-align: center; }
.when b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.when span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.what { flex: 1; min-width: 0; }
.what small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.what h3 { margin-top: 3px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.what p { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.what p b { color: var(--ink); }
.what .i { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.hike .go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); }
.empty { padding: 38px 32px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.empty p { margin-top: 8px; color: var(--muted); }
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kind { padding: 32px 30px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.kind .pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--paper); }
.kind .pill.guided { background: #FDEFD3; color: #8A5A00; }
.kind h3 { margin-top: 14px; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.kind p { margin-top: 10px; color: var(--muted); }
.kind ul { margin: 16px 0 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }

/* ---------- the app: its phones side by side ---------- */
.phones { display: flex; gap: 34px; justify-content: center; align-items: flex-start; padding: 10px 0 30px; }
.phones figure { margin: 0; display: grid; justify-items: center; gap: 18px; }
.phones .phone { --s: .78; }
.phones figure:nth-child(even) { margin-top: 56px; }
.phones figcaption { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .8); }

/* ---------- the foot ---------- */
.foot { position: relative; z-index: 5; background: var(--night); color: rgba(255, 255, 255, .86); padding: 70px 0 36px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot .brand { color: #fff; }
.foot-grid p { margin-top: 14px; max-width: 360px; color: rgba(255, 255, 255, .62); }
.foot h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.foot ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.foot ul a { text-decoration: none; }
.foot ul a:hover { text-decoration: underline; }
.foot-photos { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); font-size: 12.5px; line-height: 1.6; }
.foot-photos a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 2px; }
.foot-end { margin-top: 18px; color: rgba(255, 255, 255, .45); font-size: 13px; }

/* ---------- from page to page: the page goes up and away, the next one comes in (and where a browser has no such
   transitions, journey.js does the same with .leaving) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .45s var(--ease-io) both; }
::view-transition-new(root) { animation: page-in .7s var(--ease) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(24px); } }
.leaving main, .leaving .foot { opacity: 0; transform: translateY(-20px); transition: opacity .3s, transform .3s; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .trails, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.four, .steps, .steps.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phones .phone { --s: .62; }
  .phones { gap: 18px; }
}
@media (max-width: 960px) {
  .links { display: none; }
  .menu-btn { display: inline-flex; }
  .tools { margin-left: auto; }
}
@media (max-height: 820px) and (min-width: 901px) { .hold .phone { --s: .8; } }
@media (max-height: 700px) and (min-width: 901px) { .hold .phone { --s: .68; } }
@media (max-width: 900px) {
  :root { --bar-h: 64px; }
  .space, .space:first-of-type { height: auto; }
  .pin { position: relative; height: auto; min-height: 100svh; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 44px; padding: 128px 20px 90px; }
  .hold { justify-self: center; margin: 0; }
  .hold .phone { --s: .8; }
  html.js .space:not(.in) .copy > * { opacity: 1; }
  .stage .shade { background: linear-gradient(180deg, rgba(6, 11, 17, .64) 0%, rgba(6, 11, 17, .44) 40%, rgba(6, 11, 17, .68) 100%); }
  .stage .peaks { display: none; }
  .scroll-hint { display: none; }
  /* on a phone the altitude and the place sit in the bar, between the name and the buttons */
  .hud { z-index: 31; top: 0; bottom: auto; left: 146px; right: 110px; height: var(--bar-h); flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; }
  .hud .alt { display: flex; align-items: baseline; gap: 4px; }
  .hud .alt b { font-size: 17px; }
  .hud .alt span { margin: 0; font-size: 10px; letter-spacing: .06em; }
  .hud .alt span [lang] { display: none; }
  .hud .alt span::after { content: "m"; }
  html.hy .hud .alt span::after { content: "մ"; }
  .where { min-width: 0; width: 100%; height: 15px; }
  .where > div { left: 0; right: 0; transform: none; }
  .where > div > span { display: none; }
  .where b { font-size: 11px; font-weight: 600; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .way { display: none; }
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
  .facts, .facts.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .kinds, .plans, .grid.two { grid-template-columns: minmax(0, 1fr); }
  .phones { justify-content: flex-start; overflow-x: auto; padding: 10px 20px 30px; margin-inline: calc(-1 * var(--gut)); scroll-snap-type: x mandatory; }
  .phones figure { scroll-snap-align: center; }
  .phones figure:nth-child(even) { margin-top: 0; }
  .phones .phone { --s: .72; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .trails, .grid, .grid.four, .steps, .steps.three { grid-template-columns: minmax(0, 1fr); }
  .hero { height: 86svh; min-height: 520px; }
  .hero .credit { max-width: 64%; font-size: 10.5px; }
  .hero .place { display: none; }
  .hike { gap: 16px; padding: 16px 18px; }
  .hike .go { display: none; }
  .when { width: 50px; }
  .when b { font-size: 30px; }
  .card, .kind, .plan { padding: 24px 22px; }
  .table th, .table td { padding: 13px 12px; font-size: 14.5px; }
  .band { min-height: 540px; border-radius: 24px; }
  .band .credit { position: relative; right: auto; bottom: auto; max-width: none; padding: 0 24px 18px; text-align: left; }
  .peak small { font-size: 16px; }
  .peak .stem { height: 30px; }
}

/* the 3D walk keeps its long space and its screen standing on a phone too */
@media (max-width: 900px) {
  .space.hero3d { height: 480vh; }
  .space.hero3d .pin { position: sticky; top: 0; height: 100svh; min-height: 0; align-content: start; padding-top: 128px; }
  .walk-note { left: 20px; right: 20px; bottom: 36px; }
  .summit-note > small { padding: 0 24px; }
}

/* ---------- less motion: everything where it ends, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal], .w > span, .hold { opacity: 1 !important; transform: none !important; }
  html.js .tc-map .route { stroke-dashoffset: 0 !important; }
  .intro { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}