@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #181818;
  --night: #111111;
  --night-deep: #080808;
  --paper: #ffffff;
  --sand: #f5f3ee;
  --gold: #e2c479;
  --brass: #74551c;
  --muted: #505050;
  --light-muted: #dedcd6;
  --line: #dedbd3;
  --dark-line: #3d3b35;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
section[id] { scroll-margin-top: 25px; }

:focus-visible {
  outline: 2px solid #8c661f;
  outline-offset: 5px;
}

.dark :focus-visible, .site-header :focus-visible, .film-dialog :focus-visible {
  outline-color: var(--gold);
}

.icon-library, .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.skip-link {
  position: absolute;
  z-index: 4;
  top: 1rem;
  left: 1rem;
  transform: translateY(-200%);
  padding: .65rem 1rem;
  background: var(--paper);
}

.skip-link:focus { transform: translateY(0); }

.wrap {
  width: min(100% - clamp(38px, 9vw, 146px), 1248px);
  margin-inline: auto;
}

.section-pad { padding-block: clamp(4.5rem, 8vw, 7.5rem); }

.dark {
  color: var(--paper);
  background: var(--night);
}

.eyebrow {
  font: 500 .72rem/1.45 var(--mono);
  letter-spacing: .13em;
}

.site-header {
  color: var(--paper);
  background: var(--night);
}

.masthead {
  min-height: 94px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--dark-line);
}

.pitch-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(.6rem, 1.55vw, 1.3rem);
  padding-block: .7rem;
}

.luxarabia-logo {
  width: clamp(102px, 10.5vw, 126px);
  height: auto;
}

.pitch-label {
  display: grid;
  gap: .2rem;
  padding-left: clamp(.6rem, 1.55vw, 1.3rem);
  border-left: 1px solid var(--dark-line);
  color: var(--light-muted);
  font-size: .78rem;
  line-height: 1.25;
}

.pitch-label strong { color: var(--gold); }

.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  font-size: .86rem;
  color: var(--gold);
  white-space: nowrap;
}

.instagram-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.instagram-link .icon { width: 1rem; height: 1rem; }

.hero { padding-top: clamp(1.65rem, 4.6vw, 4.25rem); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
  align-items: center;
  gap: clamp(2.2rem, 6vw, 5.2rem);
  padding-bottom: clamp(2.2rem, 5.3vw, 4.6rem);
}

.hero-copy { padding-block: 1rem 1.7rem; }

.hero-kicker {
  color: var(--gold);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.signal-dot {
  width: 7px;
  height: 7px;
  flex: none;
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
}

.divider { color: #a5a08e; }

h1, h2, .reel h3, .timeline h3, .footer-title {
  font-family: var(--serif);
  font-weight: 400;
}

h1 {
  margin: .25em 0 .2em;
  font-size: clamp(3.75rem, 7.2vw, 7.25rem);
  line-height: .86;
  letter-spacing: -.035em;
}

h1 em { color: var(--gold); font-weight: 400; }

.hero-intro {
  max-width: 30rem;
  color: var(--light-muted);
  font-size: clamp(1rem, 1.39vw, 1.19rem);
}

.button {
  display: inline-flex;
  min-height: 51px;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: .72rem 1.1rem .72rem 1.3rem;
  border-radius: 2px;
  font-size: .93rem;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease;
}

.button-gold { background: var(--gold); color: var(--night-deep); margin-top: 1.75rem; }
.button-gold:hover { background: #f7dda8; }
.button-dark { background: var(--night); color: var(--paper); margin-top: 1.65rem; }
.button-dark:hover { background: #333333; }

.hero-still {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 1.14;
  min-width: 0;
  overflow: hidden;
  border-radius: 1px;
  background: #444444;
  border: 1px solid #524936;
}

.hero-still > img, .reel-poster > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.hero-still > img { filter: saturate(.78); }

.hero-still:hover > img, .reel-poster:hover > img { transform: scale(1.028); }

.hero-still::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .86), transparent 36%);
  pointer-events: none;
}

.frame-corner {
  position: absolute;
  z-index: 1;
  top: 15px;
  width: 14px;
  height: 14px;
  color: #fff7df;
  border-top: 1px solid;
  opacity: .85;
}

.frame-corner-tl { left: 15px; border-left: 1px solid; }
.frame-corner-tr { right: 15px; border-right: 1px solid; }

.still-label {
  position: absolute;
  z-index: 1;
  top: 1.4rem;
  left: 1.4rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: 3px;
  color: var(--paper);
  background: rgba(13, 13, 13, .92);
}

.still-label .signal-dot { color: var(--gold); width: 6px; height: 6px; }

.still-caption {
  position: absolute;
  z-index: 1;
  inset: auto 1.4rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  color: #fffaf0;
}

.still-caption .eyebrow { display: block; margin-bottom: .22rem; color: #f5e3bb; }

.still-caption strong {
  font: 400 clamp(1.85rem, 3.2vw, 2.8rem)/1 var(--serif);
  display: block;
}

.play-disc {
  display: grid;
  width: 53px;
  height: 53px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  color: #fffbef;
  background: rgba(13, 13, 13, .82);
  transition: background-color 180ms ease, color 180ms ease;
}

.play-disc .icon { width: 25px; height: 25px; }
a:hover .play-disc { color: var(--night); background: var(--gold); border-color: var(--gold); }

.pilot-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--dark-line);
}

.pilot-facts div {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  min-height: 96px;
  padding: .9rem clamp(.9rem, 3.5vw, 3.5rem);
}

.pilot-facts div:first-child { padding-left: 0; }
.pilot-facts div + div { border-left: 1px solid var(--dark-line); }

.pilot-facts dt { color: var(--light-muted); line-height: 1.25; font-size: .93rem; }

.pilot-facts dd {
  order: -1;
  color: var(--gold);
  font: 400 clamp(2.9rem, 4vw, 4.2rem)/.86 var(--serif);
}

.section-intro, .plan-grid, .pricing-grid, .vision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 6.25rem);
}

.section-kicker {
  color: var(--brass);
  margin-bottom: 1.05rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.section-kicker span {
  padding: .19rem .39rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  letter-spacing: 0;
}

.dark .section-kicker { color: var(--gold); }

h2 {
  font-size: clamp(3.4rem, 5.8vw, 5.6rem);
  line-height: .92;
  letter-spacing: -.022em;
}

.section-intro { align-items: end; margin-bottom: 2.4rem; }
.section-intro > p, .plan-intro > p:last-child, .vision-copy > p:not(.eyebrow), .price-intro > p:not(.eyebrow) {
  max-width: 31rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.42vw, 1.14rem);
}

.section-intro > p { padding-bottom: .1rem; }

.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.45vw, 2rem);
}

.reel-poster {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1px;
  background: #dedbd3;
  place-items: center;
}

.reel-poster img, .reel-poster::after {
  position: absolute;
  inset: 0;
}

.reel-poster::after {
  content: "";
  background: linear-gradient(to top, rgba(0, 0, 0, .97), rgba(0, 0, 0, .76) 16%, transparent 53%);
  pointer-events: none;
}

.poster-map img { object-position: 50% 13%; }
.poster-character img { object-position: 50% 43%; }

.reel-poster .play-disc {
  position: relative;
  z-index: 1;
  margin-bottom: 2.6rem;
  width: 53px;
  height: 53px;
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .14);
}

.reel-number, .reel-length {
  position: absolute;
  z-index: 1;
  top: .85rem;
  padding: .34rem .52rem;
  border-radius: 2px;
  color: var(--paper);
  background: rgba(17, 17, 17, .88);
}

.reel-number { left: .85rem; }
.reel-length { right: .85rem; }

.reel-cover {
  position: absolute;
  z-index: 1;
  inset: auto .55rem .95rem;
  text-align: center;
  color: var(--paper);
}

.reel-format { color: var(--gold); }

.reel h3 {
  margin-top: .38rem;
  font-size: clamp(2rem, 3.55vw, 3.25rem);
  line-height: .95;
  letter-spacing: -.015em;
}

.reel-copy {
  padding-top: .9rem;
  color: var(--muted);
  font-size: .97rem;
}

.reels-note {
  margin-top: 1.8rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}

.plan { background: var(--sand); }
.plan-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.plan-intro > p:last-child, .price-intro > p:not(.eyebrow), .vision-copy > p:not(.eyebrow) { margin-top: 1.2rem; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #cfc5b2;
}

.timeline li {
  display: grid;
  grid-template-columns: 8.1rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  padding-block: 1.32rem;
  border-bottom: 1px solid #cfc5b2;
}

.phase { margin-top: .44rem; color: var(--brass); }

.timeline h3 {
  font-size: clamp(1.85rem, 2.65vw, 2.5rem);
  line-height: 1;
}

.timeline p { color: var(--muted); margin-top: .4rem; font-size: .96rem; }

.pricing {
  background: var(--night-deep);
}

.pricing-grid {
  grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
  align-items: start;
  gap: clamp(2rem, 5.7vw, 5.5rem);
}

.price-intro > p:not(.eyebrow), .tier-note { color: var(--light-muted); }

.production-card {
  max-width: 31rem;
  margin-top: 1.75rem;
  background: #191919;
  border: 1px solid var(--dark-line);
  border-radius: 5px;
}

.base-rate {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.1rem 1.25rem 1.1rem 1rem;
  color: var(--paper);
  font-size: .86rem;
  line-height: 1.35;
}

.base-rate strong { font-weight: 500; color: var(--light-muted); }
.price { color: var(--gold); font: 400 3.7rem/.88 var(--serif); white-space: nowrap; }

.price-currency {
  font: 500 .65rem/1 var(--mono);
  letter-spacing: .06em;
}

.production-scope div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: .75rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--dark-line);
  font-size: .87rem;
}

.production-scope dt { color: var(--gold); font-weight: 600; }
.production-scope dd { color: var(--light-muted); }

.thresholds {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dark-line);
  background: var(--night);
  border-radius: 5px;
}

.threshold-heading {
  color: var(--gold);
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--dark-line);
}

.thresholds table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.thresholds th, .thresholds td { padding: .7rem .25rem; text-align: left; }
.thresholds th:first-child { padding-left: 1.25rem; }
.thresholds th:last-child, .thresholds td:last-child { padding-right: 1rem; }
.thresholds thead { color: var(--light-muted); font-size: .82rem; }
.thresholds thead th { font-weight: 500; }

.thresholds tbody tr { border-top: 1px solid var(--dark-line); }
.thresholds tbody tr:last-child { background: #211e17; }
.thresholds tbody th { color: var(--gold); font: 400 clamp(1.85rem, 3.1vw, 2.8rem)/1.05 var(--serif); }
.thresholds tbody td { font-size: clamp(1.05rem, 2.05vw, 1.6rem); font-weight: 600; }
.thresholds td.or { color: var(--light-muted); font: 400 .72rem/1 var(--mono); }

.tier-note {
  padding: .85rem 1.25rem 1.05rem;
  border-top: 1px solid var(--dark-line);
  font-size: .82rem;
}

.vision-grid {
  align-items: center;
  gap: clamp(2rem, 6.5vw, 5.8rem);
}

.vision-still {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.vision-still img { width: 100%; height: auto; aspect-ratio: 1.49; object-fit: cover; background: #d3c9b7; }

.vision-still figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .9rem;
  background: var(--sand);
  color: var(--brass);
}

.site-footer { padding-block: 1.8rem; }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer-title { font-size: 1.95rem; line-height: 1; }
.footer-caption { color: var(--light-muted); font-size: .86rem; margin-top: .35rem; }
.footer-credit {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--light-muted);
}

.footer-credit img {
  width: clamp(138px, 13vw, 174px);
  height: auto;
  padding: .46rem .31rem;
  background: var(--paper);
  border-radius: 2px;
}

.film-dialog {
  max-width: calc(100% - 1.25rem);
  max-height: calc(100% - 1.25rem);
  width: max-content;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--dark-line);
  border-radius: 8px;
  color: var(--paper);
  background: var(--night);
}

.film-dialog::backdrop { background: rgba(0, 0, 0, .86); }
body:has(.film-dialog[open]) { overflow: hidden; }

.film-surface { display: flex; flex-direction: column; align-items: center; padding: .8rem; }

.film-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 .05rem .65rem;
}

.film-header .eyebrow { color: var(--gold); }
.film-header h2 { font-size: clamp(1.75rem, 4vw, 2.35rem); margin-top: .2rem; }

.close-button {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--dark-line);
  border-radius: 5px;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
}

.close-button:hover { background: #333333; }

.film-video {
  display: block;
  width: min(calc(100vw - 3.1rem), 25rem, calc((100dvh - 9rem) * .5625));
  height: auto;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 4px;
  object-fit: contain;
}

.film-link {
  margin-top: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  color: var(--light-muted);
  font-size: .82rem;
}

.film-link:hover { color: var(--gold); }
.film-link .icon { width: 1rem; height: 1rem; }

@media (max-width: 1020px) {
  .hero-grid { gap: 2.4rem; }
  .hero-still { aspect-ratio: 1 / 1.15; }
  .hero-still img { object-position: 50% 50%; }
  .timeline li { grid-template-columns: 1fr; gap: .45rem; }
  .phase { margin-top: 0; }
}

@media (max-width: 990px) {
  .instagram-link { display: none; }
}

@media (max-width: 750px) {
  .masthead { min-height: 80px; }
  .hero-grid, .section-intro, .plan-grid, .pricing-grid, .vision-grid { grid-template-columns: minmax(0, 1fr); gap: 1.55rem; }
  .hero-copy { padding: .6rem 0 .3rem; }
  .hero-still { aspect-ratio: 1.18; }
  h1 { font-size: clamp(3.45rem, 12.7vw, 5.5rem); }
  h2 { font-size: clamp(3.25rem, 10vw, 5.1rem); }
  .pilot-facts div { min-height: 98px; align-items: start; justify-content: center; flex-direction: column; gap: .35rem; padding: .7rem .65rem; }
  .pilot-facts dt { font-size: .77rem; }
  .pilot-facts dd { font-size: 2.9rem; }
  .section-intro { margin-bottom: 1.6rem; gap: .9rem; }
  .vision-copy { grid-row: 1; }
  .reel-grid { gap: .9rem; }
  .reel h3 { font-size: 2rem; }
  .reel-copy { font-size: .9rem; }
  .eyebrow { font-size: .67rem; }
  .reel-number, .reel-length { top: .55rem; }
  .reel-number { left: .55rem; }
  .reel-length { right: .55rem; }
  .reel-poster .play-disc { width: 46px; height: 46px; }
}

@media (max-width: 620px) {
  .reel-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .reel-poster { aspect-ratio: 1 / 1.07; }
  .reel h3 { font-size: 2.65rem; }
  .reel-copy { font-size: .96rem; }
}

@media (max-width: 550px) {
  .wrap { width: calc(100% - 38px); }
  .hero-still { aspect-ratio: 1.19; }
  .still-label { top: 1rem; left: 1rem; }
  .still-caption { inset: auto 1rem 1rem; }
  .frame-corner { top: 10px; }
  .frame-corner-tl { left: 10px; }
  .frame-corner-tr { right: 10px; }
  .footer-inner { align-items: start; flex-direction: column; gap: 1rem; }
  .threshold-heading { padding-inline: .85rem; }
  .thresholds th:first-child { padding-left: .85rem; }
  .thresholds th:last-child, .thresholds td:last-child { padding-right: .8rem; }
  .tier-note { padding-inline: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}