/* PushPull v2 landing — hand-written, reproducing the v1 finishing exactly.
   Tokens kept local on purpose: v2 exists to diverge, and a shared stylesheet
   would make every experiment here a change to v1. Fonts come from
   /start/fonts.css (Inter, Inter Tight, JetBrains Mono, with the Greek subset). */

:root {
  --ink: #050505;
  --ink-2: #0B0B0C;
  --card: #101010;
  --paper: #F5F3ED;
  --muted: #A19D94;
  --dim: #6F6C66;
  --accent: #EE964B;
  --accent-hi: #F2A863;
  --line: #272727;
  --line-2: #393939;

  --display: 'Inter Tight', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad-y: clamp(72px, 11vh, 190px);
  --pad-x: 24px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--paper); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- reveal engine (mirrors v1: headings from top, everything else from bottom,
   the rule grows, photos fade. Initial transforms are set in JS so no-JS shows all). ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- shared bits ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--dim);
  margin: 0 0 22px;
  text-transform: uppercase;
}
.rule-wrap { width: 64px; transform: skewX(-24deg); margin: 0 0 30px; }
.rule-wrap i { display: block; height: 2px; background: var(--accent); transform-origin: left center; }
.lead {
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--paper);
  margin: 0;
}
.body {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.punch {
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--paper);
  margin: 0;
}
.section {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.wrap { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }

h2.title {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 80px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0;
}
h2.title .muted { color: var(--muted); }

/* ---- CTA button ---- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--accent);
  padding: 18px 30px;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  transition: background .3s var(--ease), gap .3s var(--ease);
}
.cta:hover { background: var(--accent-hi); color: var(--ink); gap: 16px; }
.cta--lg { font-size: 14px; padding: 21px 40px; }

.linkish {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 12px 16px;
}
.linkish:hover { color: var(--paper); }

/* ---- CTA sheen (verbatim from v1) ---- */
.cta-sheen { position: relative; overflow: hidden; }
.cta-sheen::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -160%;
  width: 55%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.12) 62%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: ctaSheen 3.4s ease-in-out infinite;
}
@keyframes ctaSheen { 0%, 60% { left: -160%; } 78%, 100% { left: 170%; } }
@media (prefers-reduced-motion: reduce) { .cta-sheen::after { display: none; } }

/* ---- hatch overlay ---- */
.hatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 28px);
}

/* ===================== NAV ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  background: rgba(5,5,5,0);
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5,5,5,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .brand { display: flex; align-items: center; }
.nav .brand img { width: 32px; height: 32px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 12px; }
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span { width: 22px; height: 2px; background: var(--paper); display: block; }

/* mobile menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3,3,3,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 88px 28px 32px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.menu.open { opacity: 1; pointer-events: auto; }
.menu .close {
  position: absolute;
  top: 11px; right: 24px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font: 400 26px/1 var(--body);
  color: var(--paper);
  background: none; border: 0; cursor: pointer;
}
/* Each section as a transparent outlined button, in the same angled shape. */
.menu-nav { display: flex; flex-direction: column; gap: 10px; }
.menu-link {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--line);
  padding: 16px 20px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  transition: border-color .2s ease, color .2s ease;
}
.menu-link:hover { color: var(--accent); border-color: var(--accent); }
/* Σύνδεση Μέλους is a filled white button; ΣΤΕΙΛΕ ΑΙΤΗΣΗ orange — same shape. */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--ink);
  padding: 17px 22px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.menu-btn.login { background: var(--paper); margin-top: 6px; }
.menu-btn.login:hover { color: var(--ink); }
.menu-btn.apply { background: var(--accent); }
.menu-btn.apply:hover { color: var(--ink); }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: var(--pp-hero-h, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 112px var(--pad-x) 48px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: 50% 48%;
  transform: translateX(26%) scale(1.06);
  transform-origin: center center;
  -webkit-mask-image: radial-gradient(ellipse 82% 88% at 52% 50%, #000 52%, rgba(0,0,0,.55) 76%, transparent 97%);
  mask-image: radial-gradient(ellipse 82% 88% at 52% 50%, #000 52%, rgba(0,0,0,.55) 76%, transparent 97%);
  filter: contrast(1.04) saturate(1.03);
  z-index: 0;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.72) 40%, rgba(5,5,5,.04) 100%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 42% 44%, rgba(238,150,75,.055) 0%, rgba(5,5,5,0) 58%);
}
.hero .wrap { max-width: var(--maxw); width: 100%; }
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--accent);
  margin: 0 0 22px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 8.4vw, 96px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0 0 26px;
  text-transform: uppercase;
}
.hero h1 .muted { color: var(--muted); }
/* Line 1 is the longer string; shrink it so its width matches line 2 exactly. The
   font is shared, so one ratio holds at every breakpoint. Both lines stay on one line. */
.hero h1 .hl1 { display: inline-block; font-size: .69em; white-space: nowrap; }
.hero h1 .hl2 { display: inline-block; white-space: nowrap; }
.hero-lead { max-width: 30ch; margin-bottom: 20px; line-height: 1.16; }
.hero-body { max-width: 44ch; margin-bottom: 34px; }

@media (max-width: 899.98px) {
  .hero-bg {
    object-position: 50% 46%;
    transform: translateX(25%) scale(1.30);
    filter: contrast(1.08) saturate(1.05);
  }
  .hero-overlay {
    background:
      linear-gradient(90deg, #050505 0%, rgba(5,5,5,.80) 48%, rgba(5,5,5,.10) 100%),
      linear-gradient(180deg, rgba(5,5,5,0) 0%, #050505 100%);
  }
}

/* ===================== RESULTS (01) ===================== */
.results-intro {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--muted);
  margin: 8px 0 0;
}
.results-intro .hl { color: var(--paper); }

.client {
  padding: clamp(48px, 7vw, 84px) 0;
  border-top: 1px solid var(--line);
}
.client:first-of-type { border-top: none; }
.client-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.client-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--dim); }
.client-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 4.2vw, 56px);
  letter-spacing: -.02em;
  line-height: .95;
  margin: 0;
}

/* facts come after the name, aligned label|value, then the photos */
.facts {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  border-top: 1px solid var(--line);
}
.facts li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.facts .v { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--paper); }
.facts .v.pending { color: var(--dim); font-style: italic; }
@media (max-width: 620px) {
  .facts li { grid-template-columns: 1fr; gap: 4px; }
}

.client-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 860px) {
  .client-photos { grid-template-columns: 1fr 1fr; }
}
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ba figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3/4; background: var(--ink); }
.ba img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ba .is-before img { filter: grayscale(1) contrast(1.02); }

/* Θάνος's shots are landscape action photos at very different subject scales. The far,
   small "before" and the close, large "after" both read the same in square tiles once
   the before is zoomed onto the athlete. */
.client--thanos .ba figure { aspect-ratio: 1 / 1; }
.client--thanos .ba img { object-position: center 60%; }
.client--thanos .is-before img { transform: scale(1.7); transform-origin: 42% 62%; }

/* Νίκος's "after" is a mirror selfie shot from further back, so the body reads smaller
   than the full-frame "before". Zoom it in so both bodies match. */
.client--nikos .is-after img { transform: scale(1.45); transform-origin: 50% 40%; }
.ba figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  padding: 3px 7px;
}
.ba .is-before figcaption { color: var(--paper); background: rgba(5,5,5,.7); }
.ba .is-after figcaption { color: var(--ink); background: var(--accent); }

.testimonial-shot {
  display: block;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 12px;
  cursor: zoom-in;
  transition: border-color .2s ease;
}
.testimonial-shot:hover { border-color: var(--accent); }
.testimonial-shot img { width: 100%; height: auto; }

.more-wrap { margin-top: clamp(32px, 5vw, 56px); }
.more-btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: none;
  border: 1px solid var(--line);
  padding: 15px 28px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.more-btn:hover { border-color: var(--accent); color: var(--accent); }
.more-clients { display: none; }
.more-clients.open { display: block; }

/* ===================== PROCESS (02) ===================== */
.process { background: var(--ink-2); }
.process-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: 86% 38%;
  transform: scale(1.22) translateY(-5%);
  /* Wider, earlier falloff so every edge dissolves into the background instead of
     showing the photo's rectangular border. */
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 62% 46%, #000 34%, rgba(0,0,0,.45) 62%, transparent 86%);
  mask-image: radial-gradient(ellipse 72% 78% at 62% 46%, #000 34%, rgba(0,0,0,.45) 62%, transparent 86%);
  filter: contrast(1.05) saturate(1.04);
  z-index: 0;
}
.process-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #0B0B0C 0%, rgba(11,11,12,.72) 42%, rgba(11,11,12,.05) 100%);
}
.steps { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); margin-top: clamp(36px, 5vw, 60px); max-width: 720px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step .num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 76px);
  line-height: .8;
  color: var(--line);
  flex: none;
  transition: color .35s var(--ease);
}
.step:hover .num, .step.active .num { color: var(--accent); }
.step .txt { font-size: clamp(16px, 1.7vw, 21px); line-height: 1.5; color: var(--paper); padding-top: 6px; }

@media (max-width: 899.98px) {
  .process-bg { object-position: 96% 46%; transform: scale(1.10); }
  .process-overlay { background: linear-gradient(90deg, #0B0B0C 0%, rgba(11,11,12,.90) 44%, rgba(11,11,12,.14) 100%); }
}

/* ===================== APP (03) ===================== */
.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 900px) { .app-grid { grid-template-columns: 1fr minmax(260px, 340px); } }
.app-copy { display: flex; flex-direction: column; gap: 22px; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-tab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 11px 15px;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.app-tab.active { color: var(--ink); background: var(--accent); border-color: var(--accent); }

.phone-col { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.phone-stage { display: flex; align-items: center; gap: 8px; }
.phone {
  position: relative;
  width: min(80vw, 300px);
  aspect-ratio: 9 / 19;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 44px 100px rgba(0,0,0,.6);
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 29px; overflow: hidden; background: #FAF8F3; touch-action: pan-y; }
.phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* Desktop-only arrows; on touch the screen is swiped instead. */
.app-arrow {
  flex: none;
  width: 44px; height: 44px;
  display: none;
  align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.app-arrow:hover { color: var(--accent); border-color: var(--accent); }
@media (hover: hover) and (min-width: 900px) { .app-arrow { display: flex; } }
.phone-screen img.active { opacity: 1; transform: translateY(0); }
.phone-screen img:not(.active) { opacity: 0; transform: translateY(6px); }
.app-dots { display: flex; gap: 8px; align-items: center; }
.app-dot {
  width: 7px; height: 7px;
  border-radius: 4px;
  border: 0; padding: 0;
  cursor: pointer;
  background: var(--line-2);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.app-dot.active { width: 22px; background: var(--accent); }

/* ===================== COACH (04) — hero-style: feathered photo, text on top ===================== */
.coach { overflow: hidden; }
.coach-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Centered object-position + a single translateX, like the hero. Positioning at 88%
     AND translating both pushed the figure off the right edge and cropped it. */
  object-position: 50% 46%;
  transform: translateX(24%) scale(1.12);
  transform-origin: center center;
  -webkit-mask-image: radial-gradient(ellipse 76% 84% at 58% 48%, #000 40%, rgba(0,0,0,.45) 66%, transparent 90%);
  mask-image: radial-gradient(ellipse 76% 84% at 58% 48%, #000 40%, rgba(0,0,0,.45) 66%, transparent 90%);
  filter: contrast(1.04) saturate(1.03);
  z-index: 0;
  pointer-events: none;
}
.coach-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.72) 42%, rgba(5,5,5,.05) 100%);
}
.coach-copy { position: relative; z-index: 2; max-width: 620px; display: flex; flex-direction: column; gap: 20px; margin-top: clamp(10px, 2vw, 22px); }
.coach-copy p { margin: 0; }

@media (max-width: 899.98px) {
  .coach-bg {
    object-position: 50% 44%;
    transform: translateX(20%) scale(1.34);
    filter: contrast(1.08) saturate(1.05);
  }
  .coach-overlay {
    background:
      linear-gradient(90deg, #050505 0%, rgba(5,5,5,.82) 46%, rgba(5,5,5,.12) 100%),
      linear-gradient(180deg, rgba(5,5,5,0) 0%, #050505 100%);
  }
}
.coach-copy p { margin: 0; }

/* ===================== START (05) — centered final CTA ===================== */
.start { background: var(--ink-2); text-align: center; padding: clamp(100px, 15vh, 190px) var(--pad-x); }
.start .wrap { max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.start .mark { width: 132px; height: 132px; object-fit: contain; margin-bottom: 40px; }
.start h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 116px);
  line-height: .94;
  letter-spacing: -.03em;
  margin: 0;
  text-transform: uppercase;
}
.start h2 .accent { color: var(--accent); }
.start .body { max-width: 520px; margin: 34px 0 0; }
.start .cta { margin-top: clamp(30px, 4vw, 42px); }
.start .fine { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--dim); margin: 18px 0 0; }
.start-footer {
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 400px;
}
.start-footer .fp-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--dim);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.start-footer a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--paper);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.start-footer a:hover { color: var(--accent); border-color: var(--accent); }

/* ===================== STICKY MOBILE CTA ===================== */
.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(5,5,5,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(130%);
  transition: transform .4s var(--ease);
}
.sticky.show { transform: translateY(0); }
.sticky .label { font-family: var(--mono); font-size: 10px; line-height: 1.4; letter-spacing: .1em; color: var(--muted); }
.sticky .cta { flex: 1; justify-content: center; }

/* ===================== LIGHTBOX ===================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(94vw, 720px); max-height: 90vh; width: auto; height: auto; border: 1px solid var(--line); }

/* ---- responsive nav ---- */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .sticky { display: flex; }
}