/* ==========================================================================
   LUCID LENS — private hospitality outreach page (hospitality-q7m3k9.html)
   ========================================================================== */

.outreach { overflow-x: hidden; }
.or-header-cta { padding: var(--sp-3) var(--sp-5); }

/* ---- Intro ---- */
.or-hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-8);
}
.or-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.or-hero-foot {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-8);
  align-items: end;
}
.or-lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  max-width: 34ch;
}
.or-index { border-top: 1px solid var(--border); }
.or-index a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  transition: padding var(--dur-med) var(--ease-out), color var(--dur-fast);
}
.or-index a:hover { padding-left: var(--sp-3); }
.or-num { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--fg-faint); }
.or-where { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-faint); }

/* ---- Project sections ---- */
.or-project { padding-block: var(--sp-9) var(--sp-8); border-top: 1px solid var(--border); }
.or-project-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.or-bignum {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: var(--ls-tight);
  color: transparent;
  -webkit-text-stroke: 1px var(--c-gray-300);
}
.or-project-head .eyebrow { margin-bottom: var(--sp-3); }
.or-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.or-h2 .dim { color: var(--fg-faint); font-weight: 400; }
.or-meta { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--fg-faint); }

.or-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
}
.or-hint { color: var(--fg-faint); letter-spacing: var(--ls-wide); }

/* ---- Reel carousel ---- */
.reel-carousel { margin-bottom: var(--sp-8); }
.reel-track {
  --reel-w: clamp(240px, 24vw, 340px);
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-inline: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  scrollbar-width: none;
  outline: none;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel {
  position: relative;
  flex: 0 0 var(--reel-w);
  aspect-ratio: 9 / 16;
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-panel);
  cursor: pointer;
  opacity: 0.42;
  transform: scale(0.965);
  transform-origin: center;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.reel.is-active { opacity: 1; transform: none; }
.reel video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.reel figcaption {
  position: absolute;
  left: var(--sp-4); bottom: var(--sp-4);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  pointer-events: none;
}
/* Big play glyph on inactive reels so it's obvious they're videos */
.reel::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(7,7,7,0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23f4f3ef'/%3E%3C/svg%3E") center / 26px no-repeat;
  backdrop-filter: blur(6px);
  transition: opacity var(--dur-fast);
  pointer-events: none;
}
.reel.is-active.is-playing::after { opacity: 0; }

.reel-sound {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  background: rgba(7,7,7,0.55);
  backdrop-filter: blur(6px);
  color: var(--c-white);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.reel-sound svg { width: 14px; height: 14px; }
.reel.is-active .reel-sound { display: inline-flex; }

.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(244,243,239,0.18);
  z-index: 2;
}
.reel-progress i { display: block; height: 100%; width: 0; background: var(--c-white); }

.reel-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.reel-arrow {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--fg);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.reel-arrow:hover:not(:disabled) { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.reel-arrow:disabled { opacity: 0.3; cursor: default; }
.reel-arrow svg { width: 18px; height: 18px; }
.reel-dots { display: flex; gap: var(--sp-2); }
.reel-dots button {
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--c-line);
  transition: background var(--dur-fast), width var(--dur-med) var(--ease-out);
}
.reel-dots button[aria-current="true"] { background: var(--c-white); width: 40px; }
.reel-count { margin-left: auto; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* ---- Photo album preview: compact mixed mosaic ---- */
.or-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.or-gallery .tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-panel);
}
.or-gallery .tile { aspect-ratio: 4 / 5; }
.or-gallery img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-med);
}
.or-gallery .tile:hover img { transform: scale(1.04); }
.tile-more {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1);
  background: rgba(7,7,7,0.58);
  backdrop-filter: blur(2px);
  color: var(--c-white);
  transition: background var(--dur-fast);
}
.tile-more strong { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: 1; }
.tile-more span { font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.or-gallery .tile:hover .tile-more { background: rgba(7,7,7,0.4); }

/* ---- Album viewer ---- */
.or-lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--c-black);
}
.or-lightbox[hidden] { display: none; }
.lb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--gutter);
}
.lb-title { display: flex; gap: var(--sp-4); align-items: baseline; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
.lb-count { color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.lb-stage {
  --lb-pad: clamp(var(--sp-4), 6vw, var(--sp-9));
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.lb-stage img {
  position: absolute;
  top: 0; bottom: 0; left: var(--lb-pad); right: var(--lb-pad);
  width: calc(100% - 2 * var(--lb-pad)); height: 100%;
  object-fit: contain;
}
.lb-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20,20,19,0.7);
  color: var(--c-white);
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: var(--sp-4); }
.lb-next { right: var(--sp-4); }
.lb-strip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-5);
  scrollbar-width: none;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-strip button {
  flex: 0 0 auto;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.4;
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: opacity var(--dur-fast), outline-color var(--dur-fast);
}
.lb-strip button:hover { opacity: 0.8; }
.lb-strip button[aria-current="true"] { opacity: 1; outline-color: var(--c-white); }
.lb-strip img { height: 100%; width: auto; display: block; }

/* ---- Contact: next steps ---- */
.or-steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: none; }
.or-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); align-items: center; }
.or-step-num {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--fg);
}
.or-steps li:nth-child(2) .or-step-num { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.or-steps strong { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); }
.or-meta-sep { color: var(--c-gray-300); margin-inline: var(--sp-1); }

/* ---- Contact ---- */
.or-contact { padding-block: var(--sp-10); border-top: 1px solid var(--border); background: var(--c-black-soft); }
.or-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-9);
  align-items: start;
}
.or-contact-title { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin-bottom: var(--sp-5); }
.or-mail {
  display: inline-block;
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.or-mail:hover { border-color: var(--fg); }
.or-form-wrap {
  background: var(--c-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
}
.or-edit { text-transform: none; letter-spacing: 0; color: var(--fg-faint); }
#o-message { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-normal); min-height: 190px; }
.or-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--sp-6);
  padding-block: var(--sp-5);
  font-size: var(--fs-sm);
}
.or-success .or-h2 { margin-bottom: var(--sp-4); }
.or-footer { padding-top: 0; border-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .or-hero-foot, .or-contact-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .or-contact-title { font-size: var(--fs-2xl); }
}
@media (max-width: 640px) {
  .reel-track { --reel-w: 74vw; gap: var(--sp-3); }
  .or-project-head { grid-template-columns: 1fr; gap: var(--sp-3); }
  .or-bignum { font-size: var(--fs-2xl); }
  .or-gallery { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .lb-strip button { height: 52px; }
  .lb-prev, .lb-next { display: none; }
  .or-hint { display: none; }
  .reel-dots { display: none; }
  .or-index a { grid-template-columns: 2.25rem 1fr auto; font-size: var(--fs-md); }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-track { scroll-behavior: auto; }
  .reel, .or-gallery img { transition: none; }
}

/* ---- Intro background photo ---- */
.or-hero-wrap { position: relative; isolation: isolate; }
.or-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.or-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  animation: or-drift 24s var(--ease-in-out) infinite alternate;
}
/* Light overall tint + darker band at the bottom where the text sits, so the
   photo stays clearly visible but the white type keeps its contrast. */
.or-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,7,0.45) 0%, rgba(7,7,7,0.22) 28%, rgba(7,7,7,0.38) 52%, rgba(7,7,7,0.75) 78%, var(--c-black) 100%),
    linear-gradient(90deg, rgba(7,7,7,0.4) 0%, rgba(7,7,7,0) 60%);
}
@keyframes or-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translateY(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .or-hero-bg img { animation: none; } }
.or-hero .or-lede { color: var(--c-white); }
.or-hero .or-title, .or-hero .or-lede, .or-hero .eyebrow, .or-hero .or-index a { text-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 2px 28px rgba(0,0,0,0.45); }
.or-hero .eyebrow, .or-hero .or-num, .or-hero .or-where { color: var(--c-white-dim); }
@media (max-width: 780px) {
  .site-header .or-header-cta { display: inline-flex; padding: var(--sp-2) var(--sp-4); }
}
@media (max-width: 640px) { .or-title { font-size: 4.5rem; } }

/* ---- Photo credit ---- */
.or-credit { margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--fg-faint); }
.or-credit a, .or-credit-name { color: var(--fg); font-weight: 500; white-space: nowrap; }
.or-credit a { border-bottom: 1px solid var(--border); }
.or-credit a:hover { border-color: var(--fg); }

/* ---- Footer Instagram button ---- */
.or-footer .footer-bottom { align-items: center; }
.or-insta {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--c-white);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.or-insta svg { width: 26px; height: 26px; color: var(--c-white); }
.or-insta:hover { border-color: var(--c-white); background: var(--c-panel); }
@media (max-width: 640px) { .or-footer .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ---- "Who we are" feature video ---- */
.or-feature {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: calc(82svh * 16 / 9); /* always fits the screen height */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-panel);
}
.or-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.or-feature.is-started video { object-fit: contain; background: var(--c-black); }
.or-feature-play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4);
  color: var(--c-white);
  background: linear-gradient(180deg, rgba(7,7,7,0) 40%, rgba(7,7,7,0.35) 100%);
  transition: background var(--dur-fast);
}
.or-feature-play:hover { background: linear-gradient(180deg, rgba(7,7,7,0.1) 40%, rgba(7,7,7,0.45) 100%); }
.or-feature-icon {
  width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-black);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transition: transform var(--dur-med) var(--ease-out);
}
.or-feature-icon svg { width: 40%; height: 40%; margin-left: 8%; }
.or-feature-play:hover .or-feature-icon { transform: scale(1.06); }
.or-feature-label {
  display: inline-flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  background: rgba(7,7,7,0.55);
  backdrop-filter: blur(6px);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.or-feature-dur { color: var(--c-gray-100); letter-spacing: var(--ls-wide); }
.or-feature.is-started .or-feature-play { display: none; }
#about { padding-bottom: var(--sp-9); }