/* Jenan Al-Estnara Elawla: site token layer (from app/design-brief.md) */
:root {
  --jee-bg: #fcf8f5;
  --jee-raise: #f6eeee;
  --jee-raise-2: #efe1e5;
  --jee-ink: #2a1228;
  --jee-muted: #6b5568;
  --jee-accent: #b4326b;
  --jee-accent-ink: #ffffff;
  --jee-gold: #a8834c;
  --jee-line: rgb(42 18 40 / 0.13);
  --jee-radius: 14px;
  --jee-display-ar: "El Messiri", "Tajawal", system-ui, sans-serif;
  --jee-body-ar: "Tajawal", system-ui, sans-serif;
  --jee-latin: "Outfit", system-ui, sans-serif;
  --jee-latin-display: "Cormorant Garamond", "Outfit", Georgia, serif;
  --jee-shadow: 0 24px 60px -30px rgb(42 18 40 / 0.35);
}
/* night scope: the film, the welcome, the quote band and text set on photographs */
.journey, .welcome, .founder, .bento__cell > div, .band {
  --jee-bg: #1b0a19;
  --jee-raise: #2a1228;
  --jee-raise-2: #341733;
  --jee-ink: #f6ecef;
  --jee-muted: #d9c8d4;
  --jee-accent: #e58aae;
  --jee-accent-ink: #2a0d1f;
  --jee-gold: #e2c391;
  --jee-line: rgb(246 236 239 / 0.16);
  color: var(--jee-ink);
}

html,
body {
  background: var(--jee-bg);
  color: var(--jee-ink);
  scroll-behavior: smooth;
}

.site {
  overflow-x: clip;
  --display: var(--jee-display-ar);
  --body: var(--jee-body-ar);
  min-height: 100dvh;
  background: var(--jee-bg);
  color: var(--jee-ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.85;
}
.site[data-lang="en"] {
  --display: var(--jee-latin-display);
  --body: var(--jee-latin);
  line-height: 1.65;
}
.site * { border-color: var(--jee-line); }
.site a { color: inherit; text-decoration: none; }
.site h1, .site h2, .site h3 { font-family: var(--display); font-weight: 600; margin: 0; }
.site p { margin: 0; }
.site img { display: block; max-width: 100%; }
.site :focus-visible { outline: 2px solid var(--jee-accent); outline-offset: 3px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; z-index: 40; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 4.5rem; padding: 0 clamp(1rem, 4vw, 3.5rem);
  background: rgb(252 248 245 / 0.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--jee-line);
}
.site-brand { display: flex; align-items: center; gap: 0.75rem; }
.site-brand img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.site-brand b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.site-brand small { display: block; color: var(--jee-muted); font-size: 0.74rem; line-height: 1.3; }
.site-nav { display: flex; gap: 1.75rem; font-size: 0.95rem; }
.site-nav a { color: var(--jee-muted); transition: color 0.2s; }
.site-nav a:hover { color: var(--jee-ink); }
.site-tools { display: flex; align-items: center; gap: 1rem; }
.lang-switch { font-family: var(--jee-latin); font-size: 0.9rem; color: var(--jee-muted); padding: 0.4rem 0.2rem; }
.site[data-lang="en"] .lang-switch { font-family: var(--jee-body-ar); font-size: 1rem; }
.lang-switch:hover { color: var(--jee-ink); }
.cta-header {
  white-space: nowrap;
  border: 1px solid var(--jee-accent); border-radius: 999px; padding: 0.45rem 1.15rem;
  font-size: 0.92rem; font-weight: 500; transition: background 0.25s, color 0.25s;
}
.cta-header:hover { background: var(--jee-accent); color: var(--jee-accent-ink); }
.cta-header:active { transform: scale(0.98); }
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-brand small { display: none; }
  .site-header { height: 4rem; }
}

/* ---------- journey: scroll plays the film ---------- */
.journey { position: relative; isolation: isolate; background: var(--jee-bg); --p: 0; }
.journey__stage { position: sticky; top: 0; z-index: 0; width: 100%; height: 100dvh; overflow: hidden; background: var(--jee-bg); }
.journey__poster, .journey__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.journey__video { visibility: hidden; }
.journey.is-painted .journey__video { visibility: visible; }
.journey__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(27 10 25 / 0.35), transparent 30%, transparent 70%, rgb(27 10 25 / 0.85)); pointer-events: none; }
.journey__progress { position: absolute; inset: auto 0 0 0; height: 2px; background: rgb(246 236 239 / 0.14); }
.journey__progress span { display: block; height: 100%; background: var(--jee-accent); transform: scaleX(var(--p)); transform-origin: left center; }
[dir="rtl"] .journey__progress span { transform-origin: right center; }
.journey__story { position: relative; z-index: 2; margin-top: -100dvh; pointer-events: none; }
.journey__chapter { min-height: 150dvh; }
.journey__pin { position: sticky; top: 0; min-height: 100dvh; display: flex; align-items: center; padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); }
.journey__chapter:nth-child(even) .journey__pin { justify-content: flex-end; }
.journey__copy { position: relative; width: min(33rem, 37vw); pointer-events: auto; }
.journey__copy::before { content: ""; position: absolute; z-index: -1; inset: -3rem -5rem; pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(27 10 25 / 0.8) 0%, rgb(27 10 25 / 0.5) 55%, transparent 78%); }
.journey__title { font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: 1.3; max-width: 14ch; text-wrap: balance; }
.site[data-lang="en"] .journey__title { line-height: 1.02; letter-spacing: -0.03em; max-width: 12ch; }
.journey__body { color: var(--jee-muted); font-size: clamp(1.05rem, 1.4vw, 1.3rem); margin-top: 1.25rem !important; max-width: 36ch; }
.journey__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; }
.journey__tags li { border: 1px solid rgb(246 236 239 / 0.25); border-radius: 999px; padding: 0.25rem 0.95rem; font-size: 0.88rem; }
.journey__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 860px) {
  .journey__pin, .journey__chapter:nth-child(even) .journey__pin { align-items: flex-end; justify-content: flex-start; padding: 6rem 1.25rem 3.5rem; }
  .journey__copy { width: 100%; }
  .journey__copy::before { inset: -3rem -1.25rem -3.5rem; background: linear-gradient(to top, rgb(27 10 25 / 0.95) 0%, rgb(27 10 25 / 0.75) 60%, transparent 100%); }
  .journey__title { font-size: clamp(2.1rem, 9.5vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { .journey__chapter { min-height: 100dvh; } .journey__video { display: none; } }

.cta-hero {
  display: inline-flex; align-items: center; gap: 0.9rem;
  background: var(--jee-accent); color: var(--jee-accent-ink);
  border-radius: 999px; padding: 0.55rem 0.6rem 0.55rem 1.5rem;
  font-weight: 700; font-size: 1.05rem;
}
[dir="rtl"] .cta-hero { padding: 0.55rem 1.5rem 0.55rem 0.6rem; }
.cta-hero i {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--jee-accent-ink); color: var(--jee-accent); font-style: normal;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta-hero:hover i { transform: translateX(4px); }
[dir="rtl"] .cta-hero:hover i { transform: translateX(-4px); }
.cta-hero:active { transform: translateY(1px); }
.cta-quiet {
  color: var(--jee-ink); font-size: 1rem; padding-bottom: 0.15rem;
  background: linear-gradient(var(--jee-accent), var(--jee-accent)) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.3s;
}
.cta-quiet:hover { background-size: 100% 3px; }
.cta-step {
  display: inline-block; border: 1px solid var(--jee-ink); padding: 0.7rem 2rem;
  border-radius: var(--jee-radius); font-weight: 500; position: relative; overflow: hidden;
  transition: color 0.3s, border-color 0.3s;
}
.cta-step:hover { border-color: var(--jee-accent); color: var(--jee-accent); }
.cta-step:active { transform: scale(0.98); }

/* ---------- sections ---------- */
.sec { padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); max-width: 90rem; margin: 0 auto; }
.sec__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec h2, .contact h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.35; }
.site[data-lang="en"] .sec h2, .site[data-lang="en"] .contact h2 { line-height: 1.08; letter-spacing: -0.02em; }
.sec__head p { color: var(--jee-muted); margin-top: 0.9rem; max-width: 60ch; }

/* services: asymmetric bento, exactly six cells */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.bento__cell {
  position: relative; overflow: hidden; border-radius: var(--jee-radius);
  background: var(--jee-raise); min-height: 21rem; display: flex; align-items: flex-end;
  grid-column: span 2;
}
.bento__cell:nth-child(1), .bento__cell:nth-child(6) { grid-column: span 4; }
.bento__cell:nth-child(3), .bento__cell:nth-child(4) { grid-column: span 3; }
.bento__cell:nth-child(2), .bento__cell:nth-child(5) { grid-column: span 2; }
.bento__cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bento__cell:hover img { transform: scale(1.04); }
.bento__cell > div {
  position: relative; width: 100%; padding: 4.5rem 1.5rem 1.4rem;
  background: linear-gradient(to top, rgb(27 10 25 / 0.94) 30%, rgb(27 10 25 / 0));
}
.bento__cell h3 { font-size: 1.4rem; line-height: 1.45; }
.bento__cell p { color: var(--jee-muted); font-size: 0.98rem; margin-top: 0.3rem; max-width: 46ch; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell, .bento__cell:nth-child(n) { grid-column: auto; min-height: 17rem; }
}

/* approach: ruled steps, no cards */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--jee-line); }
.steps li { padding: 1.75rem 1.5rem 0.5rem 0; border-inline-end: 1px solid var(--jee-line); padding-inline: 0 1.5rem; }
.steps li + li { padding-inline-start: 1.5rem; }
.steps li:last-child { border-inline-end: 0; }
.steps span { display: block; font-family: var(--jee-latin-display); font-size: 3.6rem; font-weight: 500; line-height: 1; color: var(--jee-gold); }
.steps h3 { font-size: 1.5rem; margin-top: 1rem; }
.steps p { color: var(--jee-muted); margin-top: 0.4rem; font-size: 0.98rem; }
.ways { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.ways h3 { font-size: 1.15rem; color: var(--jee-muted); font-weight: 500; }
.ways ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; }
.ways li { background: var(--jee-raise-2); border-radius: 999px; padding: 0.35rem 1.1rem; font-size: 0.95rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { border-inline-end: 0; border-bottom: 1px solid var(--jee-line); padding: 1.5rem 0; }
}

/* founder: full-bleed quote over the silk plate */
.founder { background: #1b0a19; position: relative; overflow: hidden; padding: clamp(5rem, 11vw, 10rem) clamp(1.25rem, 6vw, 6rem); }
.founder > img, .founder > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.founder figure { position: relative; margin: 0 auto; max-width: 56rem; text-align: center; }
.founder blockquote { margin: 0; }
.founder blockquote p { font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.6; }
.site[data-lang="en"] .founder blockquote p { line-height: 1.25; letter-spacing: -0.01em; }
.founder__text { color: var(--jee-muted); max-width: 44rem; margin: 1.75rem auto 0 !important; }
.founder figcaption { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.1rem; }
.founder figcaption b { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.founder figcaption span { color: var(--jee-accent); font-size: 0.92rem; }

/* articles: horizontal rail */
.articles { max-width: none; padding-inline: 0; }
.articles .sec__head { padding-inline: clamp(1.25rem, 6vw, 6rem); }
.rail {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.5rem clamp(1.25rem, 6vw, 6rem) 1.5rem; scrollbar-width: thin; scrollbar-color: var(--jee-raise-2) transparent;
}
.rail__card { flex: 0 0 min(22rem, 80vw); scroll-snap-align: start; display: flex; flex-direction: column; }
.rail__card img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--jee-radius); }
.rail__card small { color: var(--jee-accent); font-size: 0.82rem; margin-top: 1rem; }
.rail__card h3 { font-size: 1.3rem; line-height: 1.5; margin-top: 0.3rem; }
.site[data-lang="en"] .rail__card h3 { line-height: 1.25; }
.rail__card p { color: var(--jee-muted); font-size: 0.95rem; margin-top: 0.4rem; flex: 1; }
.rail__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: 0.95rem; font-weight: 500; }
.rail__more svg { transition: transform 0.3s; }
.rail__card:hover .rail__more svg { transform: translateX(4px); }
[dir="rtl"] .rail__card:hover .rail__more svg { transform: translateX(-4px); }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4rem; }
.faq__list { border-top: 1px solid var(--jee-line); }
.faq details { border-bottom: 1px solid var(--jee-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 0; font-family: var(--display); font-size: 1.2rem; font-weight: 500;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--jee-latin); font-size: 1.5rem; font-weight: 300; color: var(--jee-gold); transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--jee-muted); padding: 0 0 1.4rem; max-width: 62ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; align-items: start;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); background: var(--jee-raise); }
.contact__copy { display: flex; flex-direction: column; gap: 1rem; }
.contact__copy > p:first-of-type { color: var(--jee-muted); max-width: 50ch; margin-bottom: 1rem; }
.contact__copy .contact__note { font-size: 0.88rem; color: var(--jee-muted); border-inline-start: 2px solid var(--jee-accent); padding-inline-start: 1rem; margin-top: 0.5rem; }
.cta-whatsapp { display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.6rem; border-radius: var(--jee-radius);
  background: var(--jee-ink); color: var(--jee-accent-ink) !important; transition: transform 0.3s, background 0.3s; }
.cta-whatsapp svg { width: 2.4rem; height: 2.4rem; flex: none; }
.cta-whatsapp b { display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.cta-whatsapp small { display: block; font-size: 0.9rem; opacity: 0.75; }
.cta-whatsapp:hover { background: var(--jee-accent); transform: translateY(-2px); }
.cta-whatsapp:active { transform: translateY(0); }
.cta-mail, .contact__office { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.6rem; border: 1px solid var(--jee-line); border-radius: var(--jee-radius); }
.cta-mail svg, .contact__office svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.3rem; color: var(--jee-accent); }
.cta-mail span, .contact__office span { display: flex; flex-direction: column; }
.cta-mail bdi { font-family: var(--jee-latin); font-size: 0.9rem; color: var(--jee-muted); word-break: break-all; }
.cta-mail { transition: border-color 0.3s; }
.cta-mail:hover { border-color: var(--jee-accent); }
.contact__office { color: var(--jee-muted); font-size: 0.95rem; }
.contact__office b { color: var(--jee-ink); font-weight: 500; }
.booking { background: var(--jee-bg); border-radius: var(--jee-radius); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.1rem; }
.booking h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.booking label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; color: var(--jee-muted); }
.booking input[type="text"], .booking select, .booking textarea { font: inherit; color: var(--jee-ink); background: var(--jee-raise);
  border: 1px solid var(--jee-line); border-radius: 10px; padding: 0.7rem 0.9rem; width: 100%; }
.booking input:focus, .booking select:focus, .booking textarea:focus { outline: 2px solid var(--jee-accent); outline-offset: 1px; }
.booking__consent { flex-direction: row !important; align-items: flex-start; gap: 0.7rem !important; font-size: 0.88rem !important; }
.booking__consent input { margin-top: 0.45rem; accent-color: var(--jee-accent); width: 1.05rem; height: 1.05rem; flex: none; }
.cta-send { font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; border: 0; border-radius: 10px; padding: 0.85rem 1.5rem;
  background: var(--jee-accent); color: var(--jee-accent-ink); transition: filter 0.2s; }
.cta-send:hover { filter: brightness(1.08); }
.cta-send:active { transform: translateY(1px); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* footer */
.site-footer { padding: 3.5rem clamp(1.25rem, 6vw, 6rem) 2rem; font-size: 0.9rem; color: var(--jee-muted); }
.site-footer__top { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 2.5rem; }
.site-footer__brand { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--jee-ink); font-weight: 600; margin-bottom: 0.6rem; }
.site-footer p + p { margin-top: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer a:hover, .site-footer button:hover { color: var(--jee-ink); }
.site-footer button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.site-footer bdi { font-family: var(--jee-latin); }
.site-footer__base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--jee-line); font-size: 0.82rem; }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr; } }

/* cookie banner */
.cookie {
  position: fixed; z-index: 60; inset: auto 1rem 1rem 1rem; margin-inline: auto; max-width: 46rem;
  display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 1.4rem;
  background: var(--jee-ink); color: var(--jee-accent-ink); border-radius: var(--jee-radius);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}
.cookie b { font-family: var(--display); font-size: 1.05rem; }
.cookie p { font-size: 0.9rem; line-height: 1.6; }
.cookie p a { text-decoration: underline !important; }
.cookie__actions { display: flex; gap: 0.6rem; flex: none; }
.cookie button { font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 0.5rem 1.4rem; }
.cookie__allow { background: var(--jee-accent-ink); color: var(--jee-ink); border: 1px solid var(--jee-accent-ink); }
.cookie__deny { background: transparent; color: var(--jee-accent-ink); border: 1px solid var(--jee-accent-ink); }
.cookie button:active { transform: scale(0.97); }
@media (max-width: 640px) { .cookie { flex-direction: column; align-items: stretch; } .cookie__actions button { flex: 1; } }

/* article and policy pages */
.doc { max-width: 46rem; margin: 0 auto; padding: 8rem 1.25rem 5rem; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.4; margin-top: 0.5rem; }
.site[data-lang="en"] .doc h1 { line-height: 1.1; letter-spacing: -0.02em; }
.doc h2 { font-size: 1.6rem; margin: 2.5rem 0 0.6rem; color: var(--jee-ink); }
.doc p { margin-bottom: 1.1rem; color: var(--jee-muted); font-size: 1.1rem; }
.doc .doc__lead { color: var(--jee-ink); font-size: 1.2rem; margin: 1rem 0 2rem; }
.doc__meta { color: var(--jee-accent); font-size: 0.9rem; display: block; margin-top: 2rem; }
.doc__back { display: inline-block; color: var(--jee-muted); font-size: 0.95rem; border-bottom: 1px solid var(--jee-line); }
.doc__back:hover { color: var(--jee-ink); }
.doc__cover { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--jee-radius); margin-bottom: 2rem; }
.doc__cta { margin-top: 3.5rem; padding: 2rem; background: var(--jee-raise); border-radius: var(--jee-radius); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.doc__cta p { margin: 0; color: var(--jee-ink); font-family: var(--display); font-size: 1.25rem; }
.cta-doc { background: var(--jee-accent); color: var(--jee-accent-ink) !important; padding: 0.7rem 1.8rem; border-radius: var(--jee-radius); font-weight: 700; transition: filter 0.2s; }
.cta-doc:hover { filter: brightness(1.1); }
.cta-doc:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; }
  .bento__cell:hover img, .cta-hero:hover i, .rail__card:hover .rail__more svg, .cta-whatsapp:hover { transform: none; }
}

[hidden] { display: none !important; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 640px) {
  .site-brand b { font-size: 0.98rem; white-space: nowrap; }
  .site-brand img { width: 2.1rem; height: 2.1rem; }
  .site-tools { gap: 0.6rem; }
  .cta-header { padding: 0.35rem 0.85rem; font-size: 0.85rem; }
  .lang-switch { font-size: 0.82rem; }
  .cookie { padding: 0.9rem 1rem; gap: 0.8rem; inset: auto 0.6rem 0.6rem 0.6rem; }
  .cookie p { font-size: 0.82rem; }
  .cookie button { padding: 0.4rem 1rem; }
}

/* ---------- welcome film on entry ---------- */
.no-welcome .welcome { display: none; }
.has-welcome, .has-welcome body { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 90; background: #1b0a19; display: grid; place-items: center; transition: opacity 1s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.welcome.is-leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }
.welcome video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgb(27 10 25 / 0.52), rgb(27 10 25 / 0.16) 62%, rgb(27 10 25 / 0.5)); }
@keyframes jee-welcome-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes jee-welcome-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.welcome__copy { position: relative; text-align: center; padding: 1.5rem; max-width: 46rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-shadow: 0 2px 30px rgb(27 10 25 / 0.75); }
.welcome__copy > * { opacity: 0; animation: jee-welcome-in 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.welcome__copy img { border-radius: 50%; box-shadow: 0 0 0 1px rgb(226 195 145 / 0.6), 0 20px 60px rgb(27 10 25 / 0.5); animation-delay: 1.6s; }
.welcome__rule { width: 5rem; height: 1px; background: var(--jee-gold); opacity: 1 !important; transform: scaleX(0); animation: jee-welcome-rule 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 2.1s forwards !important; }
.welcome__title { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: 1.4; animation-delay: 2.4s; }
.site[data-lang="en"] .welcome__title { line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; }
.welcome__text { color: var(--jee-ink); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 34rem; animation-delay: 3.1s; }
.welcome__enter { position: absolute; inset-inline-end: clamp(1rem, 4vw, 3rem); bottom: clamp(1.5rem, 5vw, 3rem); font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; padding: 0.6rem 1.6rem; border-radius: 999px;
  border: 1px solid rgb(246 236 239 / 0.6); background: rgb(27 10 25 / 0.3); color: var(--jee-ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.3s, color 0.3s; }
.welcome__enter:hover { background: var(--jee-ink); color: var(--jee-accent-ink); }
.welcome__bar { position: absolute; inset: auto 0 0 0; height: 2px; background: rgb(246 236 239 / 0.18); }
.welcome__bar span { display: block; height: 100%; background: var(--jee-gold); transform: scaleX(var(--w, 0)); transform-origin: left center; transition: transform 0.25s linear; }
[dir="rtl"] .welcome__bar span { transform-origin: right center; }

/* ---------- header account link ---------- */
.acct-link { font-size: 0.92rem; color: var(--jee-muted); white-space: nowrap; }
.acct-link:hover { color: var(--jee-ink); }
@media (max-width: 640px) { .acct-link { font-size: 0.82rem; } .site-tools { gap: 0.5rem; } .site-brand b { font-size: 0.9rem; } .site-brand img { display: none; } }

/* ---------- gallery ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; gap: 0.75rem; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--jee-radius); }
.mosaic img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic img:nth-child(4) { grid-column: span 2; }
.mosaic img:nth-child(6) { grid-column: span 2; }
.mosaic img:nth-child(5) { grid-column: span 2; }
.howto { margin-top: 3rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 3rem; align-items: center; border-top: 1px solid var(--jee-line); padding-top: 2rem; }
.howto h3 { font-size: 1.4rem; max-width: 14ch; line-height: 1.5; }
.howto ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.howto li { counter-increment: s; color: var(--jee-muted); font-size: 0.98rem; }
.howto li::before { content: counter(s); display: block; font-family: var(--jee-latin-display); font-size: 2rem; font-weight: 500; color: var(--jee-gold); }
.cta-join { background: var(--jee-ink); color: var(--jee-accent-ink) !important; font-weight: 700; padding: 0.8rem 1.7rem; border-radius: 999px; white-space: nowrap; transition: background 0.3s; }
.cta-join:hover { background: var(--jee-accent); }
@media (max-width: 900px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 11rem; } .mosaic img:nth-child(n) { grid-column: auto; grid-row: auto; } .mosaic img:nth-child(1) { grid-column: span 2; }
  .howto { grid-template-columns: 1fr; } .howto ol { grid-template-columns: 1fr 1fr; } .cta-join { justify-self: start; } }

/* ---------- Q&A ---------- */
.qa { padding-top: 0; }
.qa__lead { color: var(--jee-muted); margin: 0.9rem 0 1.5rem !important; }
.qa__empty { color: var(--jee-muted); padding: 1.5rem 0 !important; }
.cta-ask { display: inline-block; border-bottom: 2px solid var(--jee-accent); padding-bottom: 0.2rem; font-weight: 500; transition: color 0.2s; }
.cta-ask:hover { color: var(--jee-accent); }

/* ---------- subscribe ---------- */
.subscribe { margin-top: 1.5rem; max-width: 24rem; }
.subscribe label { display: block; color: var(--jee-ink); margin-bottom: 0.5rem; font-size: 0.95rem; }
.subscribe div { display: flex; gap: 0.5rem; }
.subscribe input[type="email"] { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; color: var(--jee-ink); background: var(--jee-raise); border: 1px solid var(--jee-line); border-radius: 10px; padding: 0.55rem 0.8rem; }
.subscribe button { font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; border: 0; border-radius: 10px; padding: 0.55rem 1.1rem; background: var(--jee-accent); color: var(--jee-accent-ink); }
.hp { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; border: 0 !important; opacity: 0; clip-path: inset(50%); pointer-events: none; }

/* ---------- member area ---------- */
.acct { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.acct__art { position: relative; }
.acct__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acct__box { padding: 7.5rem clamp(1.25rem, 5vw, 4.5rem) 4rem; max-width: 40rem; width: 100%; }
.acct__box h1, .dash h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.4; }
.acct__lead { color: var(--jee-muted); margin: 0.5rem 0 1.75rem !important; }
@media (max-width: 900px) { .acct { grid-template-columns: 1fr; } .acct__art { display: none; } }
.dash { max-width: 62rem; margin: 0 auto; padding: 7.5rem 1.25rem 5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.app-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.app-tabs button { font: inherit; font-size: 0.95rem; cursor: pointer; color: var(--jee-muted); background: transparent; border: 1px solid var(--jee-line); border-radius: 999px; padding: 0.4rem 1.1rem; }
.app-tabs button[aria-selected="true"] { background: var(--jee-ink); color: var(--jee-accent-ink); border-color: var(--jee-ink); font-weight: 700; }
.app-card { background: var(--jee-raise); border-radius: var(--jee-radius); padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 6rem; }
.app-card h2 { font-size: 1.5rem; }
.app-balance { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--jee-raise-2); }
.app-balance small { display: block; color: var(--jee-muted); }
.app-balance strong { font-family: var(--jee-latin); font-size: 2.4rem; font-weight: 600; color: var(--jee-accent); }
.site[data-lang="ar"] .app-balance strong { font-family: var(--jee-body-ar); }
.app-balance p { color: var(--jee-muted); font-size: 0.92rem; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; }
.app-product { background: var(--jee-bg); border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.app-product h3 { font-size: 1.12rem; line-height: 1.5; }
.app-product p { color: var(--jee-muted); font-size: 0.9rem; flex: 1; }
.app-product strong { font-size: 1.3rem; margin: 0.4rem 0; }
.app-form { display: flex; flex-direction: column; gap: 0.9rem; }
.app-form.is-inline { background: var(--jee-bg); border-radius: 12px; padding: 1rem; }
.app-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; color: var(--jee-muted); }
.app-form input:not([type="checkbox"]):not([type="radio"]), .app-form select, .app-form textarea, .app-item > textarea {
  font: inherit; color: var(--jee-ink); background: var(--jee-bg); border: 1px solid var(--jee-line); border-radius: 10px; padding: 0.65rem 0.85rem; width: 100%; }
.app-form.is-inline input:not([type="checkbox"]), .app-form.is-inline select, .app-form.is-inline textarea { background: var(--jee-raise); }
.app-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--jee-muted); }
.app-check input { margin-top: 0.45rem; accent-color: var(--jee-accent); flex: none; }
.app-check a { text-decoration: underline !important; }
.app-roles { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.app-roles legend { color: var(--jee-muted); font-size: 0.92rem; margin-bottom: 0.4rem; }
.app-roles label { display: flex; gap: 0.6rem; align-items: center; border: 1px solid var(--jee-line); border-radius: 10px; padding: 0.6rem 0.9rem; cursor: pointer; }
.app-roles label:has(input:checked) { border-color: var(--jee-accent); }
.app-roles input { accent-color: var(--jee-accent); }
.app-btn { font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; display: inline-block; text-align: center; border: 1px solid var(--jee-line); background: transparent; color: var(--jee-ink) !important; border-radius: 10px; padding: 0.55rem 1.2rem; transition: border-color 0.2s, filter 0.2s; }
.app-btn:hover { border-color: var(--jee-accent); }
.app-btn.is-main { background: var(--jee-accent); border-color: var(--jee-accent); color: var(--jee-accent-ink) !important; font-weight: 700; }
.app-btn.is-main:hover { filter: brightness(1.08); }
.app-btn:disabled { opacity: 0.5; cursor: default; }
.app-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.app-item { border-top: 1px solid var(--jee-line); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.app-item > form, .app-item > textarea { align-self: stretch; }
.app-item header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
.app-item h3 { font-size: 1.1rem; line-height: 1.5; }
.app-item p { color: var(--jee-muted); font-size: 0.93rem; overflow-wrap: anywhere; }
.app-hint { color: var(--jee-muted); font-size: 0.88rem !important; }
.app-empty { color: var(--jee-muted); }
.app-stars { color: var(--jee-accent) !important; }
.app-badge { font-size: 0.78rem; border-radius: 999px; padding: 0.15rem 0.8rem; background: var(--jee-raise-2); color: var(--jee-ink); white-space: nowrap; }
.app-badge.is-confirmed, .app-badge.is-paid, .app-badge.is-active, .app-badge.is-published { background: var(--jee-accent); color: var(--jee-accent-ink); font-weight: 700; }
.app-note { border-radius: 10px; padding: 0.7rem 1rem; font-size: 0.93rem; background: var(--jee-raise-2); }
.app-note.is-bad { border: 1px solid var(--jee-accent); }
.app-note.is-warn { color: var(--jee-muted); border: 1px dashed var(--jee-line); background: transparent; }

.app-del { align-self: flex-start; font: inherit; font-size: 0.85rem; color: var(--jee-muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.app-del:hover { color: var(--jee-ink); }

/* ---------- light luxury refinements ---------- */
.site[data-lang="en"] h1, .site[data-lang="en"] h2, .site[data-lang="en"] h3 { font-weight: 500; }
.site[data-lang="en"] .journey__title { font-size: clamp(3rem, 6.4vw, 6rem); line-height: 0.98; letter-spacing: -0.02em; }
.sec__head { position: relative; padding-top: 1.75rem; }
.sec__head::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 3.5rem; height: 1px; background: var(--jee-gold); }
.bento__cell, .mosaic img, .rail__card img, .doc__cover { box-shadow: var(--jee-shadow); }
.app-card, .booking, .app-product { border: 1px solid var(--jee-line); }
.contact { background: linear-gradient(180deg, var(--jee-raise), var(--jee-bg)); }
.site-footer { background: var(--jee-raise); margin-top: 0; }
.cookie { box-shadow: 0 18px 50px rgb(42 18 40 / 0.35); }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; inset: auto 0 -0.35rem 0; height: 1px; background: var(--jee-gold); transform: scaleX(0); transition: transform 0.35s; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav { gap: 1.5rem; }

/* ---------- motion ---------- */
@keyframes jee-rise { from { transform: translateY(1.75rem); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 -20% 0); } }
.journey__chapter:first-child .journey__copy > * { animation: jee-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.journey__chapter:first-child .journey__copy > :nth-child(2) { animation-delay: 0.15s; }
.journey__chapter:first-child .journey__copy > :nth-child(3) { animation-delay: 0.3s; }
.js [data-reveal] { transform: translateY(2rem); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js [data-reveal].is-in { transform: none; }
@supports (animation-timeline: view()) {
  @keyframes jee-drift { from { transform: scale(1.14) translateY(-4.5%); } to { transform: scale(1.14) translateY(4.5%); } }
  .bento__cell img, .band > img, .svc-hero img { animation: jee-drift linear both; animation-timeline: view(); }
  .bento__cell:hover img { transform: none; }
}
.mosaic img { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mosaic img:hover { transform: scale(1.02); }

/* ---------- cinematic band ---------- */
.band { position: relative; overflow: hidden; background: #1b0a19; min-height: 70dvh; display: grid; place-items: center; text-align: center; padding: 5rem 1.25rem; }
.band > img, .band > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.band > div { position: relative; max-width: 46rem; }
.band h1, .band h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.4; }
.site[data-lang="en"] .band h1, .site[data-lang="en"] .band h2 { line-height: 1.05; }
.band p { color: var(--jee-muted); margin-top: 1rem !important; font-size: 1.15rem; }

/* ---------- service pages ---------- */
.svc-hero { position: relative; overflow: hidden; height: min(72dvh, 44rem); margin-top: 4.5rem; }
.svc-hero img { width: 100%; height: 100%; object-fit: cover; }
.svc { max-width: 72rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 4rem); display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem 5rem; }
.svc h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.35; }
.site[data-lang="en"] .svc h1 { line-height: 1.05; }
.svc__lead { font-size: 1.25rem; color: var(--jee-muted); margin: 1rem 0 2.5rem !important; }
.svc h2 { font-size: 1.5rem; margin: 2.25rem 0 0.75rem; }
.svc ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jee-line); }
.svc li { padding: 0.85rem 0; border-bottom: 1px solid var(--jee-line); color: var(--jee-muted); }
.svc aside { align-self: start; position: sticky; top: 6rem; background: var(--jee-raise); border: 1px solid var(--jee-line); border-radius: var(--jee-radius); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.9rem; }
.svc aside dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; font-size: 0.95rem; }
.svc aside dt { color: var(--jee-muted); }
.svc aside dd { margin: 0; font-weight: 500; }
.cta-svc { text-align: center; background: var(--jee-accent); color: var(--jee-accent-ink) !important; font-weight: 700; padding: 0.85rem 1.5rem; border-radius: 999px; transition: filter 0.2s; }
.cta-svc:hover { filter: brightness(1.1); }
.cta-svc-quiet { text-align: center; font-size: 0.95rem; border-bottom: 1px solid var(--jee-gold); align-self: center; padding-bottom: 0.1rem; }
.svc-more { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.25rem, 6vw, 4rem) 5rem; }
.svc-more h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.svc-more div { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.svc-more a { border: 1px solid var(--jee-line); border-radius: 999px; padding: 0.4rem 1.2rem; font-size: 0.95rem; transition: border-color 0.2s, color 0.2s; }
.svc-more a:hover { border-color: var(--jee-accent); color: var(--jee-accent); }
.bento__cell a.bento__link { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } .svc aside { position: static; } .svc-hero { height: 46dvh; margin-top: 4rem; } }

/* ---------- pricing, consultants, testimonials ---------- */
.page-head { max-width: 72rem; margin: 0 auto; padding: 9rem clamp(1.25rem, 6vw, 4rem) 2rem; }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.35; }
.site[data-lang="en"] .page-head h1 { line-height: 1.02; }
.page-head p { color: var(--jee-muted); font-size: 1.2rem; margin-top: 1rem !important; max-width: 56ch; }
.plans { max-width: 72rem; margin: 0 auto; padding: 1rem clamp(1.25rem, 6vw, 4rem) 5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.plan { background: #fff; border: 1px solid var(--jee-line); border-radius: var(--jee-radius); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--jee-shadow); }
.plan h2 { font-size: 1.35rem; line-height: 1.5; }
.plan p { color: var(--jee-muted); font-size: 0.95rem; flex: 1; }
.plan strong { font-family: var(--jee-latin-display); font-size: 2.6rem; font-weight: 500; line-height: 1.2; }
.plan strong small { font-family: var(--body); font-size: 0.95rem; color: var(--jee-muted); font-weight: 400; margin-inline-start: 0.4rem; }
.plan a { margin-top: 0.75rem; text-align: center; border: 1px solid var(--jee-ink); border-radius: 999px; padding: 0.6rem 1rem; font-weight: 500; transition: background 0.25s, color 0.25s; }
.plan a:hover { background: var(--jee-ink); color: var(--jee-bg) !important; }
.plan.is-feature { background: var(--jee-ink); color: var(--jee-bg); }
.plan.is-feature p, .plan.is-feature strong small { color: #d9c8d4; }
.plan.is-feature a { border-color: var(--jee-bg); }
.plan.is-feature a:hover { background: var(--jee-bg); color: var(--jee-ink) !important; }
.plans__note { grid-column: 1 / -1; color: var(--jee-muted); font-size: 0.92rem; }
.people { max-width: 72rem; margin: 0 auto; padding: 1rem clamp(1.25rem, 6vw, 4rem) 5rem; display: grid; gap: 1.25rem; }
.person { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; align-items: start; border-top: 1px solid var(--jee-line); padding-top: 1.5rem; }
.person__mark { width: 5rem; height: 5rem; border-radius: 50%; background: var(--jee-raise-2); display: grid; place-items: center; font-family: var(--display); font-size: 1.8rem; color: var(--jee-accent); }
.person h2 { font-size: 1.5rem; }
.person small { color: var(--jee-gold); font-size: 0.92rem; }
.person p { color: var(--jee-muted); margin-top: 0.4rem !important; max-width: 62ch; }
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.voice { background: #fff; border: 1px solid var(--jee-line); border-radius: var(--jee-radius); padding: 1.6rem; box-shadow: var(--jee-shadow); margin: 0; }
.voice p { font-family: var(--display); font-size: 1.2rem; line-height: 1.7; }
.voice footer { margin-top: 1rem; color: var(--jee-muted); font-size: 0.9rem; }
.voice footer b { color: var(--jee-gold); letter-spacing: 0.1em; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { transform: none; } .journey__chapter:first-child .journey__copy > * { animation: none; } .bento__cell img, .band > img, .svc-hero img { animation: none; } }
.plan.is-feature a { color: var(--jee-bg) !important; }
.plan.is-feature a:hover { color: var(--jee-ink) !important; }

/* ---------- v3: real brand, founder portrait, team, library ---------- */
.site-brand img { width: 2.5rem; height: auto; border-radius: 0; }
.site-footer__logo { width: 11.5rem; height: auto; margin-bottom: 1rem; }
.site-footer__hours { font-size: 0.86rem; line-height: 1.7; }
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-top: 2.25rem; }
.social span { color: var(--jee-gold); font-size: 0.82rem; letter-spacing: 0.06em; margin-inline-end: 0.5rem; }
.social a { font-family: var(--jee-latin); font-size: 0.84rem; padding: 0.4rem 1rem; border: 1px solid var(--jee-line); border-radius: 999px; background: #fff; transition: border-color 0.25s, color 0.25s; }
.social a:hover { border-color: var(--jee-gold); color: var(--jee-ink); }

/* welcome: founder on the left of the frame, greeting on the right */
.welcome { background: #caa55a; place-items: center end; }
.welcome video { object-position: 22% center; }
.welcome__shade { background: linear-gradient(90deg, rgb(27 10 25 / 0) 30%, rgb(27 10 25 / 0.5) 58%, rgb(27 10 25 / 0.84) 100%), linear-gradient(0deg, rgb(27 10 25 / 0.45), rgb(27 10 25 / 0) 26%); }
.welcome__copy { width: min(46vw, 40rem); max-width: none; margin-inline: 0; margin-right: clamp(1.5rem, 6vw, 6rem); margin-left: 0; padding: 0; gap: 1rem; text-shadow: 0 2px 24px rgb(27 10 25 / 0.55); }
.welcome__copy img.welcome__logo { width: clamp(4rem, 6.4vw, 6rem); height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 6px 22px rgb(27 10 25 / 0.5)) brightness(1.12); animation-delay: 0.5s; }
.welcome__rule { width: 6rem; animation-delay: 0.9s !important; }
.welcome__title { font-size: clamp(2rem, 4.1vw, 3.6rem); animation-delay: 1.2s; text-wrap: balance; }
.welcome__text { animation-delay: 1.8s; color: #f3e6da; }
.welcome__name { display: flex; flex-direction: column; gap: 0.1rem; animation-delay: 2.4s !important; }
.welcome__name b { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: #f0d9a8; }
.welcome__name span { font-size: 0.9rem; color: #e6d3c6; }
.welcome__team { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; animation-delay: 3s !important; }
.welcome__team span { font-size: 0.82rem; letter-spacing: 0.06em; color: #f0d9a8; margin-inline-end: 0.4rem; }
.welcome__team img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 2px solid #f0d9a8; box-shadow: 0 10px 30px rgb(27 10 25 / 0.45); opacity: 1; animation: none; }
.welcome__enter { inset-inline-end: auto; right: clamp(1.5rem, 6vw, 6rem); }
@media (max-width: 860px) {
  .welcome { place-items: start center; }
  .welcome video { object-position: center bottom; }
  .welcome__shade { background: linear-gradient(180deg, rgb(27 10 25 / 0.82) 0%, rgb(27 10 25 / 0.5) 26%, rgb(27 10 25 / 0) 42%), linear-gradient(0deg, rgb(27 10 25 / 0.86) 0%, rgb(27 10 25 / 0.35) 20%, rgb(27 10 25 / 0) 34%); }
  .welcome__copy { width: auto; margin: 0; padding: clamp(1.5rem, 5vh, 3rem) 1.25rem 0; gap: 0.55rem; height: 100%; }
  .welcome__copy img.welcome__logo { width: 3.4rem; }
  .welcome__title { font-size: clamp(1.55rem, 6.6vw, 2.2rem); line-height: 1.45; }
  .welcome__text { font-size: 0.95rem; max-width: 22rem; }
  .welcome__name { margin-top: auto; }
  .welcome__team { margin: 0.2rem 0 5.25rem; }
  .welcome__team img { width: 2.9rem; height: 2.9rem; }
  .welcome__enter { right: 50%; transform: translateX(50%); bottom: 1.5rem; white-space: nowrap; }
}

/* founder: portrait beside her own words */
.founder { background: linear-gradient(135deg, #2a1228 0%, #1b0a19 70%); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem); }
.founder__photo { position: relative; max-width: 26rem; width: 100%; justify-self: center; }
.founder__photo::before { content: ""; position: absolute; inset: -0.9rem 0.9rem 0.9rem -0.9rem; border: 1px solid rgb(226 195 145 / 0.55); border-radius: 14rem 14rem 1.25rem 1.25rem; }
.founder__photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14rem 14rem 1.25rem 1.25rem; box-shadow: 0 30px 80px rgb(0 0 0 / 0.45); }
.founder figure { margin: 0; max-width: 40rem; text-align: start; }
.founder figcaption { margin: 0 0 1.5rem; }
.founder figcaption b { font-size: 1.5rem; }
.founder figcaption span { color: #e2c391; }
.founder blockquote p { font-size: clamp(1.5rem, 2.7vw, 2.35rem); }
.founder__text { margin: 1.5rem 0 0 !important; max-width: none; }
.founder__creds { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; font-size: 0.93rem; }
.founder__creds li { position: relative; padding-inline-start: 1.1rem; color: #e9dbe2; }
.founder__creds li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.7em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #e2c391; }
.founder__sign { margin-top: 1.75rem !important; padding-top: 1.25rem; border-top: 1px solid rgb(226 195 145 / 0.3); font-family: var(--display); color: #e2c391; font-size: 1.08rem; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder__photo { max-width: 19rem; } .founder__creds { grid-template-columns: 1fr; } .founder figure { text-align: center; } .founder__creds li { text-align: start; } }

/* team */
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.member { background: #fff; border: 1px solid var(--jee-line); border-radius: var(--jee-radius); padding: 1.75rem 1.4rem 1.6rem; text-align: center; box-shadow: var(--jee-shadow); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s; }
.member:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgb(42 18 40 / 0.14); }
.member img { width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover; margin: 0 auto 1.1rem; display: block; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--jee-gold), 0 14px 34px rgb(42 18 40 / 0.16); }
.member h3 { font-size: 1.25rem; }
.member small { display: block; color: var(--jee-gold); font-size: 0.84rem; line-height: 1.6; margin-top: 0.3rem; min-height: 2.7em; }
.member p { color: var(--jee-muted); font-size: 0.93rem; margin-top: 0.7rem !important; }
.team__more { text-align: center; margin-top: 2.25rem !important; }
@media (max-width: 1000px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team__grid { grid-template-columns: 1fr; } .member small { min-height: 0; } }
.person--photo { grid-template-columns: 7rem 1fr; }
.person--photo img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; object-position: center 18%; box-shadow: 0 0 0 1px var(--jee-gold), 0 12px 30px rgb(42 18 40 / 0.14); border: 3px solid #fff; }
.person .founder__creds { margin-top: 1rem; }
.person .founder__creds li { color: var(--jee-muted); }
.person .founder__creds li::before { background: var(--jee-gold); }
@media (max-width: 560px) { .person--photo { grid-template-columns: 1fr; } .person .founder__creds { grid-template-columns: 1fr; } }

/* library */
.library__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.library__grid article { background: var(--jee-raise); border: 1px solid var(--jee-line); border-radius: var(--jee-radius); padding: 1.9rem 1.7rem; display: flex; flex-direction: column; }
.library__grid h3 { font-size: 1.3rem; padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--jee-line); }
.library__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.library__grid li { position: relative; padding-inline-start: 1.1rem; }
.library__grid li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--jee-gold); }
.library__grid li.library__more { color: var(--jee-muted); font-size: 0.9rem; }
.library__grid li.library__more::before { display: none; }
.library__grid .cta-ask { margin-top: auto; align-self: flex-start; }
.library__grid article ul + .cta-ask { margin-top: 1.5rem; }
@media (max-width: 900px) { .library__grid { grid-template-columns: 1fr; } }
.welcome__copy { position: absolute; right: clamp(1.5rem, 6vw, 6rem); top: 50%; translate: 0 -50%; margin: 0; }
@media (max-width: 860px) {
  .welcome__copy { inset: 0; translate: none; width: auto; height: auto; padding: clamp(1.25rem, 4.5vh, 2.75rem) 1.25rem 0; justify-content: flex-start; }
  .welcome__text { display: none; }
  .welcome__rule { width: 4rem; }
  .welcome__name { margin-top: auto; }
}
@media (max-width: 860px) { .welcome .welcome__name { margin-top: auto !important; } .welcome .welcome__team { margin: 0.2rem 0 5.5rem !important; } }

/* ---------- v4: the welcome is a finished film; the page only adds controls ---------- */
.welcome { background: #1b0a19; place-items: center; }
.welcome video { object-position: center; }
.welcome__enter, .welcome__sound { position: absolute; bottom: clamp(1.25rem, 4vw, 2.5rem); font: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; padding: 0.6rem 1.5rem; border-radius: 999px; border: 1px solid rgb(240 217 168 / 0.7); background: rgb(27 10 25 / 0.45); color: #fbf3ea; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.25s, color 0.25s; transform: none; white-space: nowrap; }
.welcome__enter { right: clamp(1rem, 4vw, 3rem); left: auto; inset-inline-end: auto; }
.welcome__sound { left: clamp(1rem, 4vw, 3rem); right: auto; }
.welcome__enter:hover, .welcome__sound:hover { background: #f0d9a8; color: #1b0a19; }
.welcome__play { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1rem; background: none; border: 0; color: #fbf3ea; font: inherit; font-size: 1.05rem; cursor: pointer; margin-top: 38vh; text-shadow: 0 2px 20px rgb(27 10 25 / 0.9); }
.welcome__play[hidden] { display: none; }
.welcome__play i { width: 5rem; height: 5rem; border-radius: 50%; border: 2px solid #f0d9a8; background: rgb(27 10 25 / 0.5); display: grid; place-items: center; }
.welcome__play i::before { content: ""; border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem; border-color: transparent transparent transparent #f0d9a8; margin-left: 0.3rem; }
@media (max-width: 860px) { .welcome { place-items: center; } .welcome__enter { right: 1rem; bottom: 1.25rem; transform: none; } .welcome__sound { left: 1rem; bottom: 1.25rem; } }