:root {
  --cream: #f8f6f1;
  --cream2: #f0ece3;
  --cream3: #e8e2d6;
  --teal: #2a9da8;
  --teal-light: #4dbbc6;
  --teal-dark: #1a7a84;
  --teal-glow: rgba(42,157,168,0.12);
  --navy: #0d1b2a;
  --navy-soft: #1a2e42;
  --text: #1a1612;
  --text-mid: #4a4035;
  --text-soft: #8a7d6e;
  --text-faint: #b8a990;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', sans-serif;
  --radius: 2px;
  --shadow: 0 4px 40px rgba(26,22,18,0.08);
  --shadow-lg: 0 20px 80px rgba(26,22,18,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── LIGHT DIVINE BACKGROUND ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(42,157,168,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(42,157,168,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 0% 80%, rgba(255,255,255,0.6) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8f6f1 30%, #f0ece3 100%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle light rays */
body::after {
  content: '';
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 60%;
  background: conic-gradient(from 270deg at 50% 0%,
    transparent 75deg,
    rgba(255,255,255,0.4) 80deg,
    transparent 85deg,
    transparent 88deg,
    rgba(255,255,255,0.3) 92deg,
    transparent 97deg,
    transparent 100deg,
    rgba(255,255,255,0.2) 103deg,
    transparent 108deg
  );
  pointer-events: none;
  z-index: 0;
}

/* ── NAVIGATION ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 60px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(248,246,241,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(42,157,168,0.12);
  transition: background 0.3s;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

.nav-logo svg.amedeo-logo {
  height: 44px;
  width: auto;
  color: var(--navy);
  transition: color 0.3s ease;
}

/* ── AMEDEO LOGO SYSTEM ── */
.amedeo-logo {
  display: inline-block;
  vertical-align: middle;
  color: var(--navy);
}
.amedeo-logo .logo-cross { fill: currentColor; }
.amedeo-logo .logo-name { fill: currentColor; }
.amedeo-logo .logo-tagline { fill: currentColor; opacity: 0.85; }
.amedeo-logo .logo-lines rect { fill: var(--teal); }

/* Light variant for dark backgrounds */
.amedeo-logo.light { color: #ffffff; }
.amedeo-logo.light .logo-lines rect { fill: var(--teal-light); }

/* Hero size */
.hero-logo {
  width: clamp(280px, 32vw, 440px);
  margin-bottom: 16px;
}

/* Footer size */
.footer-logo {
  width: clamp(200px, 24vw, 280px);
  margin-bottom: 20px;
}

/* Mobile nav size */
.mobile-nav-logo {
  width: clamp(200px, 50vw, 280px);
  margin-bottom: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.nav-links a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  padding: 8px 16px;
  transition: color 0.2s;
  cursor: pointer;
}

.nav-links a:hover { color: var(--teal); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(42,157,168,0.06);
  border: 1px solid rgba(42,157,168,0.2);
  border-radius: 20px;
  padding: 4px;
}

.lang-btn {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  background: none;
  border: none;
  padding: 5px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn.active {
  background: var(--teal);
  color: white;
}

.nav-cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  background: var(--teal);
  border: none;
  padding: 10px 22px;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}

.nav-cta:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

/* Mobile menu */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-mid);
  transition: all 0.3s;
}

/* ── MOBILE NAV OVERLAY ── */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(248,246,241,0.97);
  backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s;
  cursor: pointer;
}

.mobile-nav a:hover { color: var(--teal); }

.mobile-nav-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 28px;
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
}

/* ── PAGES ── */
.page { display: none; position: relative; z-index: 1; }
.page.active { display: block; }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 40px 80px;
  position: relative;
  z-index: 1;
}

/* Background photo (group photo blurred, fades out on scroll) */
.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--hero-bg-op, 1);
  transition: opacity 0.05s linear;
}

.hero-bg-photo::before {
  /* fallback gradient shown if no photo is loaded */
  content: '';
  position: absolute;
  inset: -20px;
  background:
    linear-gradient(135deg, #1a3a4a 0%, #2a5560 35%, #3a4f60 65%, #1a2030 100%);
  z-index: 1;
}

.hero-bg-photo img {
  position: absolute;
  inset: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  object-fit: cover;
  /* Blur is driven by JS via --hero-blur (starts at 0 → ends at ~26px on scroll) */
  filter: blur(var(--hero-blur, 0px)) saturate(110%) brightness(var(--hero-bri, 0.78));
  transform: scale(1.05);
  z-index: 2;
  will-change: filter;
}

/* Vignette + dark scrim overlay so white text/logo remain readable */
.hero-bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(5,15,25,0.4) 80%),
    linear-gradient(180deg, rgba(5,15,25,0.35) 0%, rgba(5,15,25,0.2) 35%, rgba(5,15,25,0.4) 70%, rgba(248,246,241,0.5) 95%, var(--cream) 100%);
}

/* Content wrapper above the background */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: var(--hero-content-op, 1);
  transform: translateY(var(--hero-content-y, 0));
  transition: opacity 0.05s linear, transform 0.05s linear;
}

/* When the hero has a photo background, text and logo are light/cream */
.hero.has-bg .hero-eyebrow { color: var(--teal-light); }
.hero.has-bg .amedeo-logo { color: #ffffff; }
.hero.has-bg .amedeo-logo .logo-lines rect { fill: var(--teal-light); }
.hero.has-bg .hero-subtitle { color: rgba(255,255,255,0.85); }
.hero.has-bg .hero-verse { color: rgba(255,255,255,0.92); text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.hero.has-bg .hero-verse cite { color: var(--teal-light); }
.hero.has-bg .scroll-hint { color: rgba(255,255,255,0.6); }
.hero.has-bg .btn-secondary { color: #ffffff; border-color: rgba(255,255,255,0.4); }
.hero.has-bg .btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: #ffffff; }

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 1s ease 0.2s forwards;
}

.hero-cross {
  font-size: 48px;
  color: var(--teal);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 1s ease 0.1s forwards;
  line-height: 1;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  opacity: 0;
  animation: fadeUp 1s ease 0.3s forwards;
}

.hero-title em {
  font-style: italic;
  color: var(--teal);
}

.hero-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp 1s ease 0.45s forwards;
}

.hero-verse {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 2.5vw, 22px);
  color: var(--text-mid);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 60px;
  opacity: 0;
  animation: fadeUp 1s ease 0.6s forwards;
}

.hero-verse cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 12px;
  font-weight: 400;
}

.hero-cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s ease 0.75s forwards;
}

.btn-primary {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: white;
  background: var(--teal);
  border: none;
  padding: 16px 36px;
  border-radius: 32px;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(42,157,168,0.3);
}

.btn-secondary {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  background: transparent;
  border: 1.5px solid rgba(42,157,168,0.4);
  padding: 16px 36px;
  border-radius: 32px;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary:hover {
  border-color: var(--teal);
  background: var(--teal-glow);
  transform: translateY(-2px);
}

/* ── SCROLL INDICATOR ── */
.scroll-hint {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 1s ease 1.2s forwards;
}

.scroll-hint span {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--teal), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ── DOMAINS PREVIEW GRID ── */
.domains-section {
  padding: 100px 60px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}

/* Blurred video background */
.domains-video-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.domains-video-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(77,187,198,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 75% 70%, rgba(42,157,168,0.25) 0%, transparent 55%),
    linear-gradient(135deg, #0a1a2a 0%, #1a3a4a 40%, #0d2030 100%);
  filter: blur(30px);
  transform: scale(1.1);
  animation: domainsFloat 24s ease-in-out infinite alternate;
}
@keyframes domainsFloat {
  0% { transform: scale(1.1) translate(0, 0); }
  100% { transform: scale(1.15) translate(20px, -10px); }
}
.domains-video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* The source video is already pre-blurred — no CSS blur applied. */
}

/* Audio toggle button (top-right of domains section) */
.video-audio-toggle {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(13,27,42,0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.video-audio-toggle:hover {
  background: var(--teal);
  border-color: var(--teal-light);
  transform: scale(1.06);
}
.video-audio-toggle svg { width: 20px; height: 20px; display: block; }

.video-audio-toggle .icon-muted,
.video-audio-toggle .icon-playing { display: none; }
.video-audio-toggle.muted .icon-muted { display: block; }
.video-audio-toggle:not(.muted) .icon-playing { display: block; }

/* Subtle pulse to invite first click before user has interacted */
.video-audio-toggle.pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(77,187,198,0.6);
  animation: audioPulse 2s ease-out infinite;
}
@keyframes audioPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (max-width: 640px) {
  .video-audio-toggle { width: 40px; height: 40px; top: 14px; right: 14px; }
  .video-audio-toggle svg { width: 18px; height: 18px; }
}
.domains-video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Very subtle overlay — almost invisible. Just a faint cream tint at top/bottom
     for soft transition into the page; middle stays clear so video is fully visible. */
  background:
    linear-gradient(180deg, rgba(248,246,241,0.18) 0%, rgba(248,246,241,0) 18%, rgba(248,246,241,0) 82%, rgba(248,246,241,0.35) 100%);
}

.section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  text-align: center;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-desc {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text-soft);
  text-align: center;
  max-width: 520px;
  margin: 0 auto 64px;
  line-height: 1.7;
}

.domains-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(42,157,168,0.1);
  border: 1px solid rgba(42,157,168,0.1);
  border-radius: 16px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

.domain-card {
  background: rgba(255,255,255,0.7);
  padding: 40px 28px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.domain-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.domain-card:hover {
  background: rgba(255,255,255,0.95);
  transform: translateY(-4px);
}

.domain-card:hover::before { transform: scaleX(1); }

.domain-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}

.domain-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
}

.domain-desc {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ── ABOUT SECTION ── */
.about-section {
  padding: 120px 60px;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-visual {
  position: relative;
}

.about-img-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, rgba(42,157,168,0.08) 0%, rgba(42,157,168,0.02) 100%);
  border: 1px solid rgba(42,157,168,0.15);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--sans);
}

.about-img-placeholder span { font-size: 48px; }

.about-accent {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(42,157,168,0.2);
  border-radius: 50%;
}

.about-accent-2 {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 80px;
  height: 80px;
  background: var(--teal-glow);
  border-radius: 50%;
}

.about-content {}

.about-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 32px;
  padding-left: 24px;
  border-left: 2px solid var(--teal);
}

.about-text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 20px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--cream3);
}

.stat-num {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ── INNER PAGE HERO ── */
.inner-hero {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 40px 80px;
  position: relative;
}

.inner-hero-icon {
  font-size: 56px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.1s forwards;
}

.inner-hero-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}

.inner-hero-title {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.3s forwards;
}

.inner-hero-desc {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text-soft);
  max-width: 560px;
  line-height: 1.7;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}

/* ── CONTENT SECTION ── */
.content-section {
  padding: 80px 60px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.content-section.with-bg {
  background: rgba(255,255,255,0.5);
  border-radius: 16px;
  border: 1px solid rgba(42,157,168,0.08);
  margin: 0 60px 60px;
  max-width: none;
  padding: 60px;
}

/* ── MEDIA PLACEHOLDER ── */
.media-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(42,157,168,0.06) 0%, rgba(42,157,168,0.02) 100%);
  border: 1px solid rgba(42,157,168,0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-faint);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 48px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.media-placeholder:hover { border-color: rgba(42,157,168,0.3); }
.media-placeholder .play-icon { font-size: 48px; color: var(--teal); opacity: 0.5; }

/* ── CARDS GRID ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.card {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(42,157,168,0.1);
  border-radius: 12px;
  padding: 32px 28px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  transform: scaleX(0);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(42,157,168,0.2);
}

.card:hover::after { transform: scaleX(1); }

.card-icon { font-size: 28px; margin-bottom: 16px; }

.card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 10px;
}

.card-text {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.7;
}

/* ── TWO COL ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin: 60px 0;
}

.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }

/* ── BRANCH CARDS ── */
.branch-card {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(42,157,168,0.12);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.branch-card:hover {
  box-shadow: var(--shadow);
  border-color: rgba(42,157,168,0.25);
}

.branch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 6px;
}

.branch-dot.forming {
  background: transparent;
  border: 2px solid var(--teal);
}

.branch-info {}
.branch-name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 4px;
}

.branch-location {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.branch-status {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.branch-status.active { background: rgba(42,157,168,0.1); color: var(--teal-dark); }
.branch-status.forming { background: rgba(42,157,168,0.05); color: var(--text-soft); border: 1px solid rgba(42,157,168,0.2); }

.branch-text {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.7;
}

/* ── FORM ── */
.join-form {
  max-width: 640px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(42,157,168,0.2);
  border-radius: 8px;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42,157,168,0.1);
}

.form-textarea { min-height: 120px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: white;
  background: var(--teal);
  border: none;
  padding: 18px 36px;
  border-radius: 32px;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 8px;
}

.form-submit:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(42,157,168,0.3);
}

.form-success {
  display: none;
  text-align: center;
  padding: 60px 40px;
}

.form-success .success-icon { font-size: 48px; margin-bottom: 20px; }
.form-success h3 { font-family: var(--serif); font-size: 32px; color: var(--navy); margin-bottom: 12px; }
.form-success p { font-family: var(--sans); font-size: 15px; color: var(--text-soft); }

/* ── DIVIDER ── */
.teal-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  margin: 24px auto;
  border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════
   CONNECT & DONATE SECTION  (social media + donations on home)
   ═══════════════════════════════════════════════════════════ */
.connect-section {
  padding: 100px 60px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.connect-section .section-label {
  text-align: center;
  margin-bottom: 12px;
}

.connect-section .section-title {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.1;
}

.connect-section .section-desc {
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text-soft);
  max-width: 580px;
  margin: 0 auto 56px;
  line-height: 1.7;
}

/* ── SOCIAL MEDIA CARDS ── */
.socials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 100px;
}

.social-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(42,157,168,0.12);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.35s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.social-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--social-color, var(--teal)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.social-card > * { position: relative; z-index: 1; }

.social-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(13,27,42,0.15);
  border-color: var(--social-color, var(--teal));
}
.social-card:hover::before { opacity: 0.08; }
.social-card:hover .social-icon { transform: scale(1.08); }

.social-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--social-color, var(--teal));
  color: white;
  transition: transform 0.3s ease;
}
.social-icon svg { width: 28px; height: 28px; }

.social-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
}

.social-handle {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--text-soft);
}

.social-card.fb { --social-color: #1877F2; }
.social-card.ig { --social-color: #E1306C; }
.social-card.yt { --social-color: #FF0000; }

/* ── DONATIONS CARDS ── */
.donations-block {
  background: linear-gradient(135deg, rgba(42,157,168,0.04) 0%, rgba(42,157,168,0.01) 100%);
  border: 1px solid rgba(42,157,168,0.12);
  border-radius: 24px;
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
}

.donations-block::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,157,168,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.donations-verse {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--text-mid);
  max-width: 560px;
  margin: 0 auto 12px;
  line-height: 1.6;
}
.donations-verse cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 6px;
}

.donations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.donation-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(42,157,168,0.15);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s ease;
}
.donation-card:hover {
  transform: translateY(-3px);
  border-color: rgba(42,157,168,0.35);
  box-shadow: 0 20px 40px rgba(13,27,42,0.08);
}

.donation-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(42,157,168,0.1);
}

.donation-flag {
  width: 36px;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.donation-flag svg { width: 100%; height: 100%; display: block; }

.donation-currency {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}
.donation-currency-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 4px;
}

.donation-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.donation-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.donation-value {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--navy);
  word-break: break-word;
}
.donation-iban {
  font-family: 'Courier New', 'SF Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--navy);
  padding: 8px 10px;
  background: rgba(42,157,168,0.06);
  border-radius: 8px;
  border: 1px dashed rgba(42,157,168,0.25);
  user-select: all;
}

.copy-iban-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: rgba(42,157,168,0.08);
  border: 1px solid rgba(42,157,168,0.25);
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 4px;
}
.copy-iban-btn:hover {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}
.copy-iban-btn svg { width: 14px; height: 14px; }
.copy-iban-btn.copied {
  background: #2e7d32;
  color: white;
  border-color: #2e7d32;
}

@media (max-width: 900px) {
  .socials-grid { grid-template-columns: 1fr; }
  .donations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .connect-section { padding: 60px 24px; }
  .donations-block { padding: 36px 22px; border-radius: 18px; }
}

/* ── VERSE BANNER ── */
.verse-banner {
  background: linear-gradient(135deg, rgba(42,157,168,0.06) 0%, rgba(42,157,168,0.02) 100%);
  border-top: 1px solid rgba(42,157,168,0.1);
  border-bottom: 1px solid rgba(42,157,168,0.1);
  padding: 80px 60px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.verse-banner blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 3.5vw, 34px);
  font-weight: 300;
  color: var(--navy);
  max-width: 800px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

.verse-banner cite {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── FOOTER ── */
footer {
  position: relative;
  z-index: 1;
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 80px 60px 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: white;
  margin-bottom: 8px;
}

.footer-brand-tagline {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 20px;
}

.footer-brand-text {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
}

.footer-col-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}

.footer-links a:hover { color: var(--teal-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}

.footer-teal-line {
  height: 3px;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal), var(--teal-light), var(--teal));
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC DOMAIN PAGE SYSTEM  (Apple-style scroll choreography)
   ═══════════════════════════════════════════════════════════ */

/* Nav adapts when scrolling over the dark cinematic backdrop */
nav.cine-mode {
  background: rgba(5,10,15,0.6) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
nav.cine-mode .nav-logo svg.amedeo-logo { color: #ffffff; }
nav.cine-mode .nav-logo svg.amedeo-logo .logo-lines rect { fill: var(--teal-light); }
nav.cine-mode .nav-links a { color: rgba(255,255,255,0.85) !important; }
nav.cine-mode .nav-links a:hover { color: var(--teal-light) !important; }
nav.cine-mode .lang-btn { color: rgba(255,255,255,0.7); }
nav.cine-mode .lang-btn.active { color: var(--teal-light); }
nav.cine-mode .nav-hamburger span { background: rgba(255,255,255,0.85); }

/* ── BACK HOME BUTTON (visible) ── */
.btn-back-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(77,187,198,0.4);
  border-radius: 30px;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-back-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(77,187,198,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-back-home:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(42,157,168,0.3);
}

.btn-back-home:hover::before { transform: translateX(100%); }

.btn-back-home .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-back-home:hover .arrow { transform: translateX(-4px); }

/* The cinematic stage — tall enough to scroll through 4 phases */
.cine-stage {
  position: relative;
  height: 420vh;             /* total scroll length */
  width: 100%;
  z-index: 2;
  --cine-progress: 0;
  --cine-intro-op: 1;
  --cine-intro-y: 0px;
  --cine-vid-op: 0;
  --cine-vid-w: 320px;
  --cine-vid-h: 180px;
  --cine-vid-r: 16px;
  --cine-vid-y: 0px;
  --cine-bg-op: 1;
  --cine-hint-op: 1;
}

/* The pinned canvas that holds all moving elements */
.cine-canvas {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* Dark cinematic backdrop */
.cine-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(42,157,168,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(13,27,42,0.9) 0%, #050a0f 70%),
    linear-gradient(180deg, #050a0f 0%, #0d1b2a 50%, #050a0f 100%);
  opacity: var(--cine-bg-op);
  z-index: 1;
}

/* Subtle particle/star layer */
.cine-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,0.3) 0.5px, transparent 1px),
    radial-gradient(circle at 35% 75%, rgba(77,187,198,0.5) 0.5px, transparent 1px),
    radial-gradient(circle at 88% 55%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 52% 42%, rgba(255,255,255,0.25) 0.5px, transparent 1px),
    radial-gradient(circle at 8% 88%, rgba(77,187,198,0.4) 0.5px, transparent 1px);
  background-size: 200px 200px, 240px 240px, 180px 180px, 220px 220px, 260px 260px, 200px 200px;
  opacity: 0.7;
  animation: cineStars 60s linear infinite;
}

@keyframes cineStars {
  to { background-position: 200px 200px, -240px 240px, 180px -180px, -220px -220px, 260px 260px, -200px 200px; }
}

/* Soft teal light ray from top */
.cine-backdrop::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(77,187,198,0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* ═══ THEME VARIANTS for cinematic backdrops ═══ */

/* ── RECREERE: NATURE / FOREST ── */
.cine-backdrop.theme-nature {
  background:
    radial-gradient(ellipse 70% 60% at 50% 25%, rgba(255,225,150,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(10,30,18,0.95) 0%, #050f08 75%),
    linear-gradient(180deg, #1a3b25 0%, #102818 40%, #050f08 100%);
}
.cine-backdrop.theme-nature::before {
  background-image:
    radial-gradient(circle at 12% 22%, rgba(168,210,128,0.5) 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(218,235,180,0.4) 1px, transparent 2px),
    radial-gradient(circle at 32% 68%, rgba(168,210,128,0.5) 1px, transparent 2px),
    radial-gradient(circle at 88% 55%, rgba(218,235,180,0.4) 1px, transparent 2px),
    radial-gradient(circle at 52% 42%, rgba(168,210,128,0.35) 1px, transparent 2px),
    radial-gradient(circle at 8% 88%, rgba(141,182,107,0.5) 1px, transparent 2px);
  background-size: 180px 180px, 220px 220px, 200px 200px, 240px 240px, 260px 260px, 180px 180px;
  opacity: 0.7;
  animation: cineDust 80s linear infinite;
}
@keyframes cineDust {
  to { background-position: -200px 800px, 220px 880px, -180px 720px, 240px 800px, -180px 700px, 200px 880px; }
}
.cine-backdrop.theme-nature::after {
  top: -10%;
  width: 100%;
  height: 80%;
  left: 0;
  transform: none;
  background:
    radial-gradient(ellipse 60% 100% at 30% -10%, rgba(255,235,160,0.20) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 70% -5%, rgba(255,220,140,0.12) 0%, transparent 45%);
}

/* Tree silhouettes at the bottom */
.cine-trees {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

/* ── TABERE: ALPINE PHOTO + WAVING SWISS FLAG ── */
/* Photo (covers full canvas) — placeholder gradient if no photo yet */
.cine-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background:
    linear-gradient(180deg, #5a7a9a 0%, #6b8aaa 30%, #b5c4d4 55%, #8aa090 75%, #4a5a4a 100%);
}

/* Dark scrim overlay for text readability over photo */
.cine-backdrop.theme-swiss,
.cine-backdrop.theme-photo {
  /* Dark scrim that sits ON TOP of a .cine-photo background image so the
     title/text remain readable. Used by Tabere (theme-swiss) and Recreere /
     Studio / Studiu Biblic (theme-photo) which all have full-bleed photo
     backgrounds. theme-photo is a generic alias — same overlay, no flag. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.20) 70%, rgba(0,0,0,0.60) 100%);
  z-index: 1;
}
.cine-backdrop.theme-swiss::before,
.cine-backdrop.theme-photo::before { display: none; }
.cine-backdrop.theme-swiss::after,
.cine-backdrop.theme-photo::after { display: none; }

/* Waving Swiss flag — SVG with turbulence displacement + CSS sway */
.swiss-flag {
  position: absolute;
  top: clamp(80px, 14vh, 140px);
  right: clamp(24px, 5vw, 64px);
  width: clamp(110px, 14vw, 200px);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.45));
  animation: swissFlagSway 5s ease-in-out infinite;
  transform-origin: top left;
}

@keyframes swissFlagSway {
  0%, 100% { transform: perspective(500px) rotateY(-4deg) rotateZ(-1deg) translateY(0); }
  25%      { transform: perspective(500px) rotateY( 6deg) rotateZ( 0.5deg) translateY(2px); }
  50%      { transform: perspective(500px) rotateY( 2deg) rotateZ( 1deg) translateY(0); }
  75%      { transform: perspective(500px) rotateY(-2deg) rotateZ(-0.5deg) translateY(1px); }
}

/* Flagpole line going up from flag */
.swiss-flagpole {
  position: absolute;
  top: 24px;
  right: calc(clamp(24px, 5vw, 64px) + clamp(110px, 14vw, 200px) - 4px);
  width: 3px;
  height: clamp(70px, 12vh, 130px);
  background: linear-gradient(180deg, #d4d4d4 0%, #a8a8a8 50%, #707070 100%);
  border-radius: 2px;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.swiss-flagpole::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5d76e 0%, #d4af37 60%, #8a6e1f 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

@media (max-width: 640px) {
  .swiss-flag { top: 90px; right: 18px; width: 100px; }
  .swiss-flagpole { top: 18px; right: calc(18px + 100px - 4px); height: 70px; }
}

/* ── MISIUNI: SUNDAY MORNING / CHURCH ── */
.cine-backdrop.theme-morning {
  background:
    radial-gradient(ellipse 60% 60% at 50% 28%, rgba(255,225,170,0.85) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(180,140,100,0.4) 0%, transparent 65%),
    linear-gradient(180deg, #f4d8a8 0%, #ecc9a0 30%, #d4a880 60%, #b88860 100%);
}
.cine-backdrop.theme-morning::before {
  /* Light particles - dust in sunlight */
  background-image:
    radial-gradient(circle at 22% 32%, rgba(255,240,200,0.7) 1px, transparent 2px),
    radial-gradient(circle at 68% 28%, rgba(255,235,180,0.6) 1px, transparent 2px),
    radial-gradient(circle at 42% 58%, rgba(255,240,200,0.5) 1px, transparent 2px),
    radial-gradient(circle at 88% 45%, rgba(255,235,180,0.6) 1px, transparent 2px),
    radial-gradient(circle at 12% 78%, rgba(255,240,200,0.4) 1px, transparent 2px);
  background-size: 200px 200px, 240px 240px, 220px 220px, 260px 260px, 280px 280px;
  opacity: 0.6;
  animation: cineDust 100s linear infinite;
}
.cine-backdrop.theme-morning::after {
  top: -15%;
  width: 100%;
  height: 90%;
  left: 0;
  transform: none;
  background:
    radial-gradient(ellipse 40% 80% at 50% 0%, rgba(255,245,220,0.6) 0%, transparent 60%),
    conic-gradient(from 270deg at 50% 5%, transparent 75deg, rgba(255,245,220,0.3) 80deg, transparent 85deg,
      transparent 90deg, rgba(255,245,220,0.4) 95deg, transparent 100deg);
}

/* Church silhouette */
.cine-church {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}

/* Light theme: dark intro text on light backdrop */
.page.cinematic.theme-light .cine-title { color: #1a1612; text-shadow: 0 2px 30px rgba(255,255,255,0.4); }
.page.cinematic.theme-light .cine-desc { color: rgba(26,22,18,0.75); }
.page.cinematic.theme-light .cine-label { color: var(--teal-dark); }
.page.cinematic.theme-light .cine-scroll-hint { color: rgba(26,22,18,0.5); }
.page.cinematic.theme-light .cine-icon { filter: drop-shadow(0 4px 24px rgba(184,136,96,0.5)); }

/* ── FILIALE: MAP ── */
.cine-backdrop.theme-map {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(13,27,42,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(5,10,15,0.9) 0%, transparent 70%),
    linear-gradient(180deg, #051018 0%, #0a1a2a 50%, #050a12 100%);
}
.cine-backdrop.theme-map::before {
  /* grid lines like a navigation chart */
  background-image:
    linear-gradient(rgba(77,187,198,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,187,198,0.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: 0 0;
  animation: none;
  opacity: 0.6;
}
.cine-backdrop.theme-map::after { display: none; }

.cine-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cine-map svg { width: 90%; max-width: 1100px; height: auto; }

/* Branch reveal cards inside Filiale */
.filiale-content {
  position: relative;
}
.branch-reveal-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(42,157,168,0.18);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 30px 80px rgba(13,27,42,0.08);
}
.branch-reveal-card.reveal { opacity: 0; transform: translateY(48px) scale(0.96); }
.branch-reveal-card.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

.branch-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(42,157,168,0.12), rgba(42,157,168,0.04));
  border: 1px solid rgba(42,157,168,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-faint);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.branch-photo .photo-icon { font-size: 32px; opacity: 0.5; }

.branch-text-block .branch-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 4px;
}
.branch-text-block .branch-location {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.branch-text-block .branch-status {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 16px;
  margin-bottom: 14px;
}
.branch-text-block .branch-status.active { background: rgba(42,157,168,0.12); color: var(--teal-dark); }
.branch-text-block .branch-status.forming { background: rgba(184,136,96,0.12); color: #8a6440; border: 1px solid rgba(184,136,96,0.25); }
.branch-text-block .branch-desc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .branch-reveal-card { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .branch-photo { aspect-ratio: 16/9; max-width: 100%; }
}

/* ── Filiale branch cards (cinematic reveal) ── */
.fil-branches-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  padding: 0 24px;
}

.fil-branch {
  position: absolute;
  width: 100%;
  max-width: 560px;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1);
  pointer-events: auto;
}

.fil-branch.fil-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fil-branch-card {
  background: rgba(248,246,241,0.94);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(77,187,198,0.3);
  border-radius: 20px;
  padding: 36px 36px 32px;
  text-align: left;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.5),
    0 0 80px rgba(77,187,198,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.fil-branch-status {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 16px;
  margin-bottom: 18px;
}
.fil-branch-status.active { background: rgba(42,157,168,0.15); color: var(--teal-dark); }
.fil-branch-status.forming { background: rgba(184,136,96,0.15); color: #8a6440; border: 1px solid rgba(184,136,96,0.3); }

.fil-branch-name {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.1;
}

.fil-branch-location {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}

.fil-branch-photo {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(42,157,168,0.1), rgba(42,157,168,0.03));
  border: 1px solid rgba(42,157,168,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--text-faint);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.fil-branch-photo .photo-icon { font-size: 28px; opacity: 0.45; }

.fil-branch-text {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

@media (max-width: 560px) {
  .fil-branch-card { padding: 26px 22px; border-radius: 16px; }
  .fil-branch-name { font-size: clamp(22px, 6vw, 30px); }
}

/* Intro overlay (dove + title) */
.cine-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(24px, 5vw, 60px);
  z-index: 3;
  pointer-events: none;
  opacity: var(--cine-intro-op);
  transform: translateY(var(--cine-intro-y));
  will-change: opacity, transform;
}

.cine-icon {
  font-size: clamp(72px, 14vw, 160px);
  line-height: 1;
  margin-bottom: clamp(24px, 4vw, 48px);
  filter: drop-shadow(0 0 60px rgba(77,187,198,0.5)) drop-shadow(0 0 20px rgba(255,255,255,0.3));
  animation: cineIconFloat 6s ease-in-out infinite;
}

@keyframes cineIconFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.03); }
}

.cine-label {
  font-family: var(--sans);
  font-size: clamp(10px, 1.4vw, 13px);
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: clamp(16px, 2.5vw, 24px);
  opacity: 0.85;
}

.cine-title {
  font-family: var(--serif);
  font-size: clamp(48px, 11vw, 140px);
  font-weight: 300;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(20px, 3vw, 32px);
  text-shadow: 0 0 60px rgba(77,187,198,0.3);
}

.cine-desc {
  font-family: var(--sans);
  font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  line-height: 1.7;
  margin: 0 auto;
}

.cine-scroll-hint {
  position: absolute;
  bottom: clamp(24px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: var(--cine-hint-op);
  transition: opacity 0.3s;
}

.cine-scroll-hint::after {
  content: '';
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--teal-light), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Video frame — grows to fullscreen then shrinks to a card */
.cine-video-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.cine-video {
  position: relative;
  width: var(--cine-vid-w);
  height: var(--cine-vid-h);
  border-radius: var(--cine-vid-r);
  overflow: hidden;
  opacity: var(--cine-vid-op);
  transform: translateY(var(--cine-vid-y));
  background: linear-gradient(135deg, #0a1620 0%, #122838 50%, #0a1620 100%);
  border: 1px solid rgba(77,187,198,0.25);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 0 120px rgba(42,157,168,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  will-change: width, height, opacity, transform;
}

/* YouTube thumbnail layer — sits at the bottom of cine-video when a real video ID is set */
.cine-video-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}
.cine-video-thumb.loaded { opacity: 1; }

/* When a thumbnail is present, hide the placeholder dove and dim the glow */
.cine-video.has-thumbnail .cine-video-dove { display: none; }
.cine-video.has-thumbnail .cine-video-glow {
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,0,0,0.25) 0%, transparent 65%);
  opacity: 0.7;
  animation: none;
}
/* Vignette overlay over the thumbnail so the play button stands out */
.cine-video.has-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.35) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ── PHOTO SLIDESHOW (used inside cine-video when no YouTube video) ── */
.cine-photo-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.cine-photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cine-photo-slide.active { opacity: 1; }

/* When a slideshow is present, hide the decorative dove + play button */
.cine-video.has-slideshow .cine-video-dove,
.cine-video.has-slideshow .cine-video-play,
.cine-video.has-slideshow .cine-video-glow { display: none; }

/* Soft vignette over the photos so the label stays readable */
.cine-video.has-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Pagination dots at the bottom of the slideshow */
.cine-photo-dots {
  position: absolute;
  bottom: clamp(14px, 2.5vh, 22px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
  pointer-events: auto;
}
.cine-photo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cine-photo-dot:hover { background: rgba(255,255,255,0.7); }
.cine-photo-dot.active {
  background: white;
  width: 28px;
  border-radius: 5px;
}

/* Animated content inside the video placeholder */
.cine-video-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.cine-video-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(77,187,198,0.25) 0%, transparent 70%);
  animation: cineGlow 4s ease-in-out infinite;
}

@keyframes cineGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.cine-video-dove {
  font-size: clamp(40px, 8vw, 96px);
  filter: drop-shadow(0 0 30px rgba(77,187,198,0.6));
  animation: cineIconFloat 5s ease-in-out infinite;
}

.cine-video-play {
  width: clamp(56px, 8vw, 88px);
  height: clamp(56px, 8vw, 88px);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(20px, 3vw, 28px);
  padding-left: 4px;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
}

.cine-video-play::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(77,187,198,0.4);
  animation: cinePulse 2.5s ease-in-out infinite;
}

@keyframes cinePulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.cine-video-play:hover {
  background: rgba(77,187,198,0.2);
  border-color: var(--teal-light);
  transform: scale(1.05);
}

.cine-video-label {
  font-family: var(--sans);
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  position: relative;
  z-index: 2;
}

/* ── Post-cinematic content section ── */
.cine-content {
  position: relative;
  z-index: 4;
  background: var(--cream);
  padding-top: clamp(60px, 10vh, 120px);
  border-radius: 32px 32px 0 0;
  margin-top: -32px;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.3);
}

.cine-content::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--teal);
  border-radius: 0 0 4px 4px;
}

/* ── Photo gallery (column-masonry: respects each photo's natural aspect ratio) ── */
.photo-gallery {
  column-count: 3;
  column-gap: 14px;
  margin-top: 60px;
  /* Hides any leftover empty placeholder space (default value, but explicit) */
  column-fill: balance;
}

.photo-tile {
  /* Each tile sits naturally inside a column. The img sizes the tile. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(42,157,168,0.12);
  background: linear-gradient(135deg, rgba(42,157,168,0.08), rgba(42,157,168,0.02));
  position: relative;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.3s;
  /* Hidden until the image actually loads (prevents empty placeholder ghosts) */
  opacity: 0;
  transform: translateY(20px);
}

.photo-tile.loaded {
  opacity: 1;
  transform: translateY(0);
}

.photo-tile.failed {
  display: none;
}

.photo-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(42,157,168,0.3);
  box-shadow: 0 20px 40px rgba(42,157,168,0.18);
}

.photo-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.photo-tile:hover::after { opacity: 1; }

/* The image sizes the tile to its natural aspect ratio (no cropping) */
.photo-tile-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.photo-tile:hover .photo-tile-img { transform: scale(1.04); }

/* Branch photos in Filiale (Tulcea / Elvetia) — same fallback pattern */
.fil-branch-photo {
  position: relative;
  overflow: hidden;
}
.fil-branch-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* About section photo (home) — drop a real photo as assets/about.jpg */
.about-img-placeholder {
  position: relative;
  overflow: hidden;
}
.about-img-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Legacy placeholder content (icon + label) inside a tile — kept harmless in case
   it's still in old HTML. New layout doesn't need it; JS hides it on success. */
.photo-tile .photo-icon {
  display: none;
}
.photo-tile span.tile-label,
.photo-tile > div[style*="text-align"] {
  display: none;
}
/* Legacy mosaic classes (t1-t7) no longer used — kept as no-op for back-compat */
.photo-tile.t1, .photo-tile.t2, .photo-tile.t3, .photo-tile.t4,
.photo-tile.t5, .photo-tile.t6, .photo-tile.t7 { /* no-op in column layout */ }

/* Section heading inside cinematic content */
.cine-content-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
  margin-bottom: 12px;
}

.cine-content-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  color: var(--navy);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.1;
}

.cine-content-sub {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-soft);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

/* Reduced motion: disable scroll-driven choreography */
@media (prefers-reduced-motion: reduce) {
  .cine-stage { height: auto; }
  .cine-canvas { position: relative; height: auto; padding: 120px 0 60px; }
  .cine-intro { position: relative; inset: auto; opacity: 1 !important; transform: none !important; padding: 60px 24px; }
  .cine-video-wrap { position: relative; inset: auto; margin: 60px auto; }
  .cine-video { width: min(90vw, 900px) !important; height: auto !important; aspect-ratio: 16/9; opacity: 1 !important; transform: none !important; }
  .cine-icon, .cine-video-dove, .cine-video-glow, .cine-video-play::before { animation: none !important; }
}

/* Mobile / tablet adjustments for cinematic */
@media (max-width: 900px) {
  .photo-gallery { column-count: 2; column-gap: 10px; }
  .photo-tile { margin-bottom: 10px; }
}
@media (max-width: 768px) {
  /* Shorter cinematic scroll on tablets — feels less endless */
  .cine-stage { height: 280vh; }
  .cine-scroll-hint { bottom: 20px; }
  /* Tighter intro on tablet */
  .cine-icon { font-size: clamp(56px, 11vw, 100px); margin-bottom: clamp(18px, 3vw, 32px); }
  .cine-title { font-size: clamp(40px, 9vw, 80px); margin-bottom: clamp(16px, 2.5vw, 24px); }
  .cine-desc { font-size: clamp(13px, 1.6vw, 16px); max-width: 92%; }
  /* Cinematic content section: tighter padding on mobile */
  .cine-content { padding-top: clamp(40px, 7vh, 80px); }
}
@media (max-width: 520px) {
  .photo-gallery { column-count: 1; column-gap: 0; }
  .photo-tile { margin-bottom: 12px; }
}
@media (max-width: 480px) {
  /* On true phones, even shorter scroll — fewer "thumb swipes" */
  .cine-stage { height: 240vh; }
  .cine-icon { font-size: 60px; margin-bottom: 14px; }
  .cine-title { font-size: clamp(34px, 10vw, 56px); line-height: 1.05; margin-bottom: 14px; }
  .cine-label { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 12px; }
  .cine-desc { font-size: 13px; line-height: 1.55; }
}

/* ═══════════════════════════════════════════════════════════
   YOUTUBE LIGHTBOX MODAL — opened by clicking ▶ on a cine-video
   ═══════════════════════════════════════════════════════════ */
.youtube-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 60px) clamp(20px, 5vw, 80px);
  opacity: 0;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.youtube-modal.open {
  display: flex;
  animation: ytFadeIn 0.35s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes ytFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}
.youtube-modal-content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.7),
    0 0 200px rgba(77,187,198,0.15);
  border: 1px solid rgba(255,255,255,0.06);
}
.youtube-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.youtube-modal-close {
  position: absolute;
  top: -54px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: var(--sans);
  transition: all 0.25s ease;
  padding: 0;
}
.youtube-modal-close:hover {
  background: var(--teal);
  border-color: var(--teal-light);
  transform: scale(1.08);
}
.youtube-modal-hint {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .youtube-modal { padding: 16px; }
  .youtube-modal-close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 16px; }
  .youtube-modal-hint { display: none; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  /* Two-row nav: top = logo + lang + CTA, bottom = scrollable tab strip */
  nav {
    padding: 0 20px;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .nav-logo svg.amedeo-logo { height: 36px; }
  .nav-links {
    display: flex !important;
    order: 3;
    width: 100vw;
    margin: 0 -20px;
    padding: 6px 16px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    border-top: 1px solid rgba(42,157,168,0.08);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex-shrink: 0; scroll-snap-align: start; }
  .nav-links a {
    font-size: 10px;
    padding: 8px 12px;
    white-space: nowrap;
    letter-spacing: 0.15em;
  }
  .nav-hamburger { display: none; }
  .nav-right { gap: 10px; }
  .nav-cta { padding: 8px 14px; font-size: 10px; }
  .lang-btn { padding: 4px 8px; font-size: 9px; }
  /* dark-mode tab strip border on cinematic pages */
  nav.cine-mode .nav-links { border-top-color: rgba(255,255,255,0.08); }

  /* Push content below the taller nav */
  .hero { padding-top: 130px; }
  .inner-hero { padding-top: 160px; }

  .domains-grid { grid-template-columns: repeat(2, 1fr); }
  .about-section { grid-template-columns: 1fr; gap: 40px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  /* ─── NAV (cleaner, tappable) ─── */
  nav { padding: 0 14px; min-height: 56px; }
  .nav-logo svg.amedeo-logo { height: 30px; }
  .nav-links { padding: 6px 12px 10px; margin: 0 -14px; }
  .nav-links a {
    font-size: 9.5px;
    padding: 10px 11px;  /* taller tap target */
    letter-spacing: 0.12em;
  }
  .nav-cta { padding: 9px 14px; font-size: 9.5px; min-height: 36px; }
  .lang-btn { padding: 5px 9px; font-size: 9.5px; min-height: 30px; }
  /* ─── HERO (mobile: less padding, content earlier) ─── */
  .hero { padding: 100px 20px 50px; min-height: 92vh; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 24px; }
  .hero-logo { width: clamp(220px, 64vw, 320px); margin-bottom: 12px; }
  .hero-subtitle { font-size: 11px; letter-spacing: 0.25em; margin-bottom: 32px; }
  .hero-verse { font-size: 17px; margin-bottom: 36px; line-height: 1.55; }
  .hero-cta-group { gap: 12px; }
  .btn-primary, .btn-secondary { padding: 14px 26px; font-size: 11px; min-height: 44px; }
  .scroll-hint { margin-top: 32px; }
  /* ─── SECTIONS (tighter padding) ─── */
  .domains-section { padding: 56px 20px; }
  .content-section { padding: 56px 20px; }
  .content-section.with-bg { margin: 0 20px 24px; padding: 36px 22px; border-radius: 14px; }
  .domains-grid { grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 12px; }
  .domain-card { padding: 28px 18px; }
  .domain-name { font-size: 16px; }
  .domain-desc { font-size: 11.5px; }
  .domain-icon { font-size: 28px; margin-bottom: 12px; }
  .cards-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .card { padding: 24px 22px; }
  .card-title { font-size: 19px; }
  .card-text { font-size: 13px; }
  .form-row { grid-template-columns: 1fr; gap: 8px; }
  .form-group { margin-bottom: 18px; }
  .form-input, .form-textarea, .form-select { padding: 14px 16px; font-size: 16px; /* 16px avoids iOS auto-zoom on focus */ }
  .form-submit { padding: 16px 28px; min-height: 50px; }
  /* ─── ABOUT (more breathing on mobile) ─── */
  .about-section { padding: 56px 20px; gap: 32px; }
  .about-quote { font-size: 22px; padding-left: 18px; margin-bottom: 22px; }
  .about-text { font-size: 14px; }
  .about-stats { gap: 16px; margin-top: 32px; padding-top: 32px; }
  .stat-num { font-size: 34px; }
  /* On phones, hide background video (saves data & battery).
     Audio still works via the toggle button — JS handles smooth fade. */
  .domains-video-bg video { display: none; }
  /* ─── INNER HERO (Alătură-te) ─── */
  .inner-hero { padding: 110px 20px 50px; min-height: 40vh; }
  .inner-hero-icon { font-size: 42px; margin-bottom: 18px; }
  .inner-hero-title { font-size: clamp(36px, 9vw, 56px); margin-bottom: 14px; }
  .inner-hero-desc { font-size: 13.5px; max-width: 92%; }
  /* ─── FOOTER ─── */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; }
  footer { padding: 48px 20px 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; padding-top: 24px; }
  .verse-banner { padding: 48px 20px; }
  .verse-banner blockquote { font-size: 20px; line-height: 1.45; }
  /* ─── SECTION HEADERS ─── */
  .section-title { font-size: clamp(28px, 8vw, 42px); }
  .section-desc { font-size: 13.5px; margin-bottom: 40px; }
  /* ─── DOMAINS audio toggle: bigger tap target ─── */
  .video-audio-toggle { width: 44px; height: 44px; }
}

/* ─── EXTRA SMALL (≤380px) ─── */
@media (max-width: 380px) {
  .hero { padding: 90px 18px 40px; }
  .hero-logo { width: clamp(200px, 70vw, 280px); }
  .hero-verse { font-size: 16px; }
  .domains-grid { grid-template-columns: 1fr; }
  .domain-card { padding: 24px 18px; }
  .nav-logo svg.amedeo-logo { height: 26px; }
  nav { padding: 0 10px; }
}

/* ═══════════════════════════════════════════════════════════
   PHOTO LIGHTBOX — full-screen image viewer with prev/next
   Opened by clicking on a .photo-tile in a .photo-gallery.
   Keyboard: ← → to navigate, ESC to close.
   Touch: swipe left/right to navigate.
   ═══════════════════════════════════════════════════════════ */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 60px) clamp(20px, 4vw, 80px);
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.photo-lightbox.open {
  display: flex;
  animation: ytFadeIn 0.32s cubic-bezier(.2,.7,.2,1) forwards;
}
.photo-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 120px rgba(77, 187, 198, 0.12);
  transition: opacity 0.25s ease;
  -webkit-user-drag: none;
}
.photo-lightbox.swap .photo-lightbox-img { opacity: 0; }

.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  font-family: var(--sans);
  padding: 0;
  z-index: 2;
}
.photo-lightbox-close:hover,
.photo-lightbox-prev:hover,
.photo-lightbox-next:hover {
  background: var(--teal);
  border-color: var(--teal-light);
  transform: scale(1.08);
}
.photo-lightbox-prev:hover,
.photo-lightbox-next:hover {
  /* Override scale + keep vertical centering */
  transform: translateY(-50%) scale(1.08);
}

.photo-lightbox-close {
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.photo-lightbox-prev,
.photo-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}
.photo-lightbox-prev { left: clamp(12px, 3vw, 28px); }
.photo-lightbox-next { right: clamp(12px, 3vw, 28px); }

.photo-lightbox-counter {
  position: absolute;
  bottom: clamp(16px, 3vh, 24px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  z-index: 2;
  pointer-events: none;
}

.photo-lightbox-hint {
  position: absolute;
  bottom: clamp(16px, 3vh, 24px);
  right: clamp(16px, 3vw, 28px);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

/* Mobile: smaller buttons + hide keyboard hints */
@media (max-width: 700px) {
  .photo-lightbox { padding: 12px; }
  .photo-lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 16px; }
  .photo-lightbox-prev, .photo-lightbox-next {
    width: 44px; height: 44px; font-size: 22px;
  }
  .photo-lightbox-prev { left: 8px; }
  .photo-lightbox-next { right: 8px; }
  .photo-lightbox-img { max-width: 96vw; max-height: 82vh; border-radius: 6px; }
  .photo-lightbox-counter { font-size: 11px; padding: 5px 12px; bottom: 14px; }
  .photo-lightbox-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH DEVICE FIX — instant tap, no double-tap-to-click
   On iOS Safari, elements with :hover styles require TWO taps:
   first tap shows hover state, second tap fires the actual click.
   This is especially bad on the nav after scroll triggers cine-mode
   (which adds aggressive :hover rules with !important).

   Solution:
     1. touch-action: manipulation → disables the 300ms tap delay,
        and tells browser "no double-tap zoom, just fire click".
     2. -webkit-tap-highlight-color: transparent → no grey flash on tap.
     3. Inside @media (hover: none), neutralise hover color changes so
        tap-then-tap behaviour disappears. Hover effects still work
        on real mouse devices via the existing rules.
   ═══════════════════════════════════════════════════════════ */
.nav-links a,
.mobile-nav a,
.nav-cta,
.nav-logo,
.nav-hamburger,
.lang-btn,
.btn-primary,
.btn-secondary,
.btn-back-home,
.domain-card,
.card,
.social-card,
.copy-iban-btn,
.cine-video-play,
.photo-tile,
.cine-photo-dot,
.video-audio-toggle,
.youtube-modal-close,
.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next,
.mobile-nav-close {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (hover: none) {
  /* Disable color-on-hover effects on touch devices so first tap doesn't
     just "highlight" the link — instead, taps register as immediate clicks. */
  .nav-links a:hover { color: var(--text-mid); }
  nav.cine-mode .nav-links a:hover { color: rgba(255, 255, 255, 0.85) !important; }
  .mobile-nav a:hover { color: var(--text); }
  .nav-cta:hover { background: var(--teal); transform: none; }
  .btn-primary:hover { transform: none; box-shadow: none; background: var(--teal); }
  .btn-secondary:hover { transform: none; border-color: rgba(42,157,168,0.4); background: transparent; }
  .btn-back-home:hover { transform: none; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95); }
  .domain-card:hover { transform: none; background: rgba(255,255,255,0.7); }
  .domain-card:hover::before { transform: scaleX(0); }
  .card:hover { transform: none; box-shadow: none; border-color: rgba(42,157,168,0.1); }
  .card:hover::after { transform: scaleX(0); }
  .social-card:hover { transform: none; box-shadow: none; border-color: rgba(42,157,168,0.12); }
  .photo-tile:hover { transform: translateY(0); box-shadow: none; border-color: rgba(42,157,168,0.12); }
  .photo-tile:hover .photo-tile-img { transform: none; }
  .cine-video-play:hover { transform: none; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
  .video-audio-toggle:hover { transform: none; background: rgba(13,27,42,0.45); border-color: rgba(255,255,255,0.22); }
  .youtube-modal-close:hover { transform: none; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
  /* :active for tactile press feedback on touch */
  .nav-links a:active,
  .mobile-nav a:active,
  .nav-cta:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-back-home:active,
  .domain-card:active,
  .card:active,
  .social-card:active,
  .photo-tile:active,
  .cine-video-play:active {
    opacity: 0.7;
    transition: opacity 0.05s linear;
  }
}