/* Cinematic V10 — real film, restrained motion, and explicit account access. */
:root {
  --cinema-black: #080b0d;
  --cinema-panel: #11171a;
  --cinema-panel-2: #182126;
  --cinema-line: rgba(238, 241, 239, 0.17);
  --cinema-line-strong: rgba(238, 241, 239, 0.34);
  --cinema-text: #f4f1eb;
  --cinema-muted: #aeb7ba;
  --cinema-copper: #e17854;
  --cinema-copper-bright: #ff9b72;
}

/* The contact route remains a first-class action in the upper-right header. */
.header-contact {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border-bottom: 1px solid transparent;
  padding: 0 9px;
  color: rgba(244, 241, 235, 0.78);
  font-size: 12px;
  font-weight: 690;
  white-space: nowrap;
  transition: border-color 180ms ease, color 180ms ease;
}
.header-contact:hover,
.header-contact:focus-visible { border-bottom-color: var(--cinema-copper-bright); color: #fff; }
.nav-links > a[href="#contact"] { display: none; }

/* First viewport: typography at left, tangible moving product at right. */
.hero.hero-cinematic {
  min-height: 820px;
  height: max(820px, 100svh);
  max-height: 1080px;
  padding-top: clamp(138px, 16vh, 182px);
  background:
    radial-gradient(circle at 83% 30%, rgba(225, 120, 84, 0.1), transparent 26%),
    linear-gradient(115deg, #080b0d 0%, #0c1114 58%, #11191d 100%);
}
.hero.hero-cinematic::before {
  top: 78px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 8.333% 100%,
    linear-gradient(180deg, rgba(255,255,255,0.02) 1px, transparent 1px) 0 0 / 100% 96px;
  opacity: 0.52;
}
.hero.hero-cinematic::after { display: none; }
.hero-cinematic .hero-copy { max-width: min(44vw, 690px); }
.hero-cinematic h1 {
  max-width: 680px;
  margin-bottom: 30px;
  font-size: clamp(70px, 7.15vw, 116px);
  letter-spacing: -0.055em;
  line-height: 0.86;
}
.hero-cinematic h1 span { display: block !important; }
.hero-cinematic h1 span:nth-child(2)::after { content: none; }
.hero-cinematic .hero-copy > p { max-width: 570px; color: rgba(244,241,235,0.72); }
.hero-cinematic .hero-actions .button { min-width: 200px; justify-content: center; }
.hero-trust {
  display: flex;
  max-width: 610px;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  color: rgba(244,241,235,0.5);
  font-size: 10px;
  font-weight: 650;
}
.hero-trust span { position: relative; padding-left: 14px; }
.hero-trust span::before { position: absolute; top: 0.52em; left: 0; width: 5px; height: 5px; background: var(--cinema-copper); content: ""; }

.hero-cinematic .hero-network { top: 96px; right: var(--gutter); bottom: 92px; left: 48%; overflow: visible; }
.hero-cinematic .hero-network::before { display: none; }
.hero-cinematic .hero-network::after {
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  height: 78%;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  transform: none;
}
.hero-film-card {
  position: absolute;
  z-index: 2;
  top: 8%;
  right: 0;
  width: min(46vw, 760px);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--cinema-line-strong);
  background: #070a0c;
  box-shadow: 0 46px 100px rgba(0,0,0,0.54);
  transform: translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transition: transform 700ms cubic-bezier(0.2,0.75,0.2,1);
}
.hero-film-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.72) contrast(1.08) brightness(0.76); }
.hero-film-card::after { position: absolute; inset: 0 0 54px; border: 1px solid rgba(255,255,255,0.08); content: ""; pointer-events: none; }
.hero-film-card figcaption {
  display: grid;
  min-height: 54px;
  grid-template-columns: auto 1fr 28px;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: rgba(11,15,17,0.98);
}
.hero-film-card figcaption span { color: var(--cinema-copper-bright); font-size: 8px; font-weight: 780; letter-spacing: 0.13em; }
.hero-film-card figcaption strong { color: var(--cinema-text); font-size: 11px; font-weight: 620; }
.hero-film-card figcaption i { position: relative; width: 26px; height: 26px; border: 1px solid var(--cinema-line); border-radius: 50%; }
.hero-film-card figcaption i::after { position: absolute; top: 8px; left: 10px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--cinema-text); content: ""; }

.hero-route-card {
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 2%;
  width: min(33vw, 470px);
  border: 1px solid var(--cinema-line-strong);
  padding: 18px;
  background: rgba(17,23,26,0.93);
  box-shadow: 0 32px 70px rgba(0,0,0,0.48);
  backdrop-filter: blur(18px);
}
.hero-route-card > span,
.hero-output-card > span { color: var(--cinema-copper-bright); font-size: 8px; font-weight: 780; letter-spacing: 0.13em; }
.hero-route-card > p { margin: 12px 0 15px; color: rgba(244,241,235,0.84); font-size: 12px; line-height: 1.55; }
.hero-route-progress { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--cinema-line); border-bottom: 1px solid var(--cinema-line); padding: 10px 0; color: var(--cinema-muted); font-size: 9px; }
.hero-route-progress i { position: relative; width: 44px; height: 2px; overflow: hidden; background: rgba(255,255,255,0.13); }
.hero-route-progress i::after { position: absolute; inset: 0; background: var(--cinema-copper-bright); content: ""; animation: cinemaRoute 2.2s ease-in-out infinite; }
.hero-route-card ul { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }
.hero-route-card li { display: grid; min-width: 0; grid-template-columns: 24px minmax(0,1fr); gap: 2px 8px; align-items: center; border: 1px solid var(--cinema-line); padding: 8px; }
.hero-route-card li b { grid-row: 1 / span 2; color: var(--cinema-copper-bright); font-family: var(--mono); font-size: 9px; }
.hero-route-card li span { overflow: hidden; color: var(--cinema-text); font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.hero-route-card li small { color: var(--cinema-muted); font-size: 7px; }
.hero-output-card {
  position: absolute;
  z-index: 4;
  width: 230px;
  min-height: 116px;
  border: 1px solid var(--cinema-line);
  padding: 15px;
  background: rgba(10,14,16,0.9);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
}
.hero-output-card strong { display: block; margin: 20px 0 8px; color: var(--cinema-text); font-size: 13px; }
.hero-output-card p,
.hero-output-card code { margin: 0; color: var(--cinema-muted); font-size: 8px; line-height: 1.45; }
.hero-output-document { top: 48%; left: 0; }
.hero-output-code { top: 66%; left: 8%; }
.hero-signal-field { z-index: 1; }
.hero-cinematic .network-caption { display: none; }

@keyframes cinemaRoute {
  0% { transform: translateX(-102%); }
  55%, 100% { transform: translateX(102%); }
}

/* Director: one genuine moving reference, then an honest textual shot plan. */
.director-product-preview { background: #080d10; }
.director-live-frame { position: relative; overflow: hidden; margin: 0; border-bottom: 1px solid var(--forge-line); background: #050709; }
.director-live-frame video { display: block; width: 100%; aspect-ratio: 16 / 8.3; object-fit: cover; object-position: center 42%; filter: saturate(0.7) contrast(1.1) brightness(0.78); }
.director-live-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,8,10,0.78)); content: ""; pointer-events: none; }
.director-live-frame figcaption { position: absolute; z-index: 2; right: 18px; bottom: 16px; left: 18px; display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 14px; }
.director-live-frame figcaption span { color: var(--forge-copper-bright); font-size: 7px; font-weight: 780; letter-spacing: 0.15em; }
.director-live-frame figcaption strong { color: #fff; font-size: 9px; font-weight: 570; }
.director-live-frame figcaption i { height: 1px; background: var(--forge-copper-bright); }
.director-shot-strip figure > span { top: 7px; }
.shot-cue { position: relative; display: grid; min-height: 72px; place-items: end start; overflow: hidden; padding: 10px; background: linear-gradient(145deg, #20292e, #0b1114); }
.shot-cue::before { position: absolute; top: 14px; right: 10px; left: 10px; height: 1px; background: rgba(255,255,255,0.13); box-shadow: 0 10px rgba(255,255,255,0.08), 0 20px rgba(255,255,255,0.05); content: ""; }
.shot-cue b { position: relative; z-index: 2; color: rgba(255,255,255,0.8); font-family: var(--mono); font-size: 7px; letter-spacing: 0.12em; }
.shot-cue i { position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border-right: 1px solid var(--forge-copper); border-bottom: 1px solid var(--forge-copper); }
.director-shot-strip figure:nth-child(2) .shot-cue { background: linear-gradient(145deg, #28272a, #0b1114); }
.director-shot-strip figure:nth-child(3) .shot-cue { background: linear-gradient(145deg, #182a31, #0b1114); }
.director-shot-strip figure:nth-child(4) .shot-cue { background: linear-gradient(145deg, #2c2421, #0b1114); }
.director-shot-strip figure:nth-child(5) .shot-cue { background: linear-gradient(145deg, #253036, #0b1114); }
.director-shot-strip figure:nth-child(6) .shot-cue { background: linear-gradient(145deg, #2f2a25, #0b1114); }

/* Downstream editorial system: realistic product visualization, never fake staff photography. */
.rendered-work-section {
  padding: clamp(84px, 10vw, 156px) var(--gutter);
  border-top: 1px solid var(--cinema-line);
  background: #0a0e10;
}
.rendered-work-heading {
  display: grid;
  grid-template-columns: minmax(200px, 0.55fr) minmax(420px, 1.05fr) minmax(280px, 0.7fr);
  align-items: end;
  gap: clamp(28px, 5vw, 82px);
  margin-bottom: clamp(44px, 6vw, 82px);
}
.rendered-work-heading .section-index { align-self: start; margin: 8px 0 0; color: var(--cinema-copper-bright); }
.rendered-work-heading h2 { margin: 0; color: var(--cinema-text); font-family: var(--serif); font-size: clamp(50px, 5.5vw, 88px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.91; }
.rendered-work-heading > p:last-child { max-width: 440px; margin: 0; color: var(--cinema-muted); font-size: 14px; line-height: 1.72; }
.rendered-work-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(280px, 0.68fr); gap: 12px; }
.rendered-work-figure { position: relative; overflow: hidden; min-height: 0; margin: 0; border: 1px solid var(--cinema-line); background: #0d1215; isolation: isolate; }
.rendered-work-figure-film { grid-row: 1 / span 2; }
.rendered-work-figure img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78) contrast(1.03) brightness(0.82); transition: filter 500ms ease, transform 900ms cubic-bezier(0.2,0.7,0.2,1); }
.rendered-work-figure-film img { aspect-ratio: 1.32 / 1; object-position: center; filter: saturate(0.9) contrast(1.01) brightness(0.94); }
.rendered-work-figure-review img,
.rendered-work-figure-route img { aspect-ratio: 16 / 8.45; }
.rendered-work-figure-review img { object-position: center 48%; }
.rendered-work-figure-route img { object-position: center 52%; }
.rendered-work-figure::after { position: absolute; z-index: 1; inset: 38% 0 0; background: linear-gradient(180deg, transparent, rgba(4,7,8,0.91)); content: ""; pointer-events: none; }
.rendered-work-figure figcaption { position: absolute; z-index: 2; right: clamp(18px, 2.4vw, 38px); bottom: clamp(18px, 2.4vw, 38px); left: clamp(18px, 2.4vw, 38px); }
.rendered-work-figure figcaption span { color: var(--cinema-copper-bright); font-size: 8px; font-weight: 780; letter-spacing: 0.14em; }
.rendered-work-figure figcaption strong { display: block; max-width: 560px; margin-top: 10px; color: #fff; font-family: var(--serif); font-size: clamp(25px, 2.5vw, 42px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
.rendered-work-figure:not(.rendered-work-figure-film) figcaption strong { font-size: clamp(21px, 1.85vw, 30px); }
.rendered-work-figure figcaption p { max-width: 570px; margin: 10px 0 0; color: rgba(255,255,255,0.72); font-size: 11px; line-height: 1.55; }
.rendered-work-figure:hover img { filter: saturate(0.92) contrast(1.02) brightness(0.89); transform: scale(1.01); }
.rendered-work-figure-film:hover img { filter: saturate(0.96) contrast(1.01) brightness(0.98); }
.rendered-work-disclosure { max-width: 780px; margin: 20px 0 0 auto; color: rgba(174,183,186,0.56); font-size: 9px; line-height: 1.55; text-align: right; }

/* Account: product-grade sign-in, registration, and recovery in one place. */
.account-section { position: relative; overflow: hidden; background: #e9edeb; }
.account-section::before { position: absolute; top: 0; right: var(--gutter); bottom: 0; width: 1px; background: rgba(19,25,27,0.16); content: ""; }
.account-hub { max-width: 1040px; }
.account-entry { grid-template-columns: minmax(260px,0.7fr) minmax(420px,1fr); gap: clamp(42px,7vw,96px); border-top: 1px solid #747b7b; padding-top: 32px; }
.account-entry-copy > span { color: #954a33; }
.account-entry-copy h3 { max-width: 340px; margin-top: 18px; color: #101517; font-size: clamp(42px,4vw,62px); line-height: 0.96; }
.account-entry-copy p { max-width: 360px; color: #596264; font-size: 14px; }
.account-entry-copy ul { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.account-entry-copy li { position: relative; padding-left: 18px; color: #384144; font-size: 11px; }
.account-entry-copy li::before { position: absolute; top: 0.48em; left: 0; width: 6px; height: 6px; background: #b45d3f; content: ""; }
.account-entry-ui { min-width: 0; }
.account-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #aab0ae; }
.account-mode-tabs button { position: relative; min-height: 50px; border: 0; padding: 0 14px; background: transparent; color: #697173; font-size: 12px; font-weight: 700; cursor: pointer; }
.account-mode-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #111719; content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.account-mode-tabs button.active { color: #111719; }
.account-mode-tabs button.active::after { transform: scaleX(1); }
.account-view { padding-top: 26px; }
.account-view[hidden] { display: none !important; }
.account-view-heading > span { color: #9a4b34; font-size: 9px; font-weight: 760; letter-spacing: 0.14em; text-transform: uppercase; }
.account-view-heading h4 { margin: 8px 0 22px; color: #111719; font-family: var(--serif); font-size: 34px; font-weight: 500; }
.account-view-heading p { max-width: 520px; margin: -8px 0 22px; color: #596264; font-size: 12px; line-height: 1.6; }
.web-register-form,
.web-login-form,
.web-activate-form,
.web-reset-request-form { display: grid; gap: 14px; }
.web-register-form label,
.web-login-form label,
.web-activate-form label,
.web-reset-request-form label { display: grid; gap: 9px; color: #394244; font-size: 11px; font-weight: 700; }
.web-register-form input,
.web-login-form input,
.web-activate-form input,
.web-reset-request-form input { width: 100%; height: 54px; border: 1px solid #8e9695; border-radius: 2px; padding: 0 15px; background: rgba(255,255,255,0.65); color: #101517; }
.web-register-form input:focus,
.web-login-form input:focus,
.web-activate-form input:focus,
.web-reset-request-form input:focus { border-color: #9c4b33; background: #fff; }
.web-register-form .button,
.web-login-form .button,
.web-activate-form .button,
.web-reset-request-form .button { min-width: 210px; justify-self: start; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.field-link,
.account-back { border: 0; padding: 0; background: transparent; color: #8d422d; font-size: 10px; font-weight: 720; cursor: pointer; }
.field-link:hover,
.account-back:hover { text-decoration: underline; }
.account-back { margin-bottom: 22px; }
.activate-account { grid-column: auto; margin-top: 26px; border-top-color: #b8bdbb; }
.activate-account summary { color: #535c5e; font-size: 11px; }
.billing-panel .account-mode-tabs { border-color: var(--forge-line); }
.billing-panel .account-mode-tabs button { color: var(--forge-steel); }
.billing-panel .account-mode-tabs button.active { color: var(--forge-ivory); }
.billing-panel .account-mode-tabs button::after { background: var(--forge-copper-bright); }
.billing-panel .account-view-heading h4 { color: var(--forge-ivory); }
.billing-panel .account-view-heading p,
.billing-panel .web-reset-request-form label { color: var(--forge-steel); }
.billing-panel .web-reset-request-form input { border-color: var(--forge-line-strong); background: rgba(255,255,255,0.055); color: var(--forge-ivory); }
.billing-panel .field-link,
.billing-panel .account-back { color: var(--forge-copper-bright); }

@media (max-width: 1280px) {
  .header-contact { display: none; }
  .nav-links > a[href="#contact"] { display: inline-flex; }
  .hero-cinematic .hero-network { left: 45%; }
  .hero-output-card { width: 200px; }
}

@media (max-width: 1100px) {
  .header-contact { display: inline-flex; }
  .nav-links > a[href="#contact"] { display: grid; }
  .hero.hero-cinematic { min-height: 940px; height: auto; max-height: none; padding-bottom: 390px; }
  .hero-cinematic .hero-copy { max-width: 720px; }
  .hero-cinematic .hero-network { top: auto; right: var(--gutter); bottom: 84px; left: var(--gutter); height: 330px; }
  .hero-film-card { top: 0; right: 0; width: min(68vw,680px); }
  .hero-route-card { right: 0; bottom: -12px; width: min(54vw,460px); }
  .hero-output-document { top: 18%; left: 0; }
  .hero-output-code { display: none; }
  .rendered-work-heading { grid-template-columns: minmax(180px,0.5fr) 1fr; }
  .rendered-work-heading > p:last-child { grid-column: 2; }
}

@media (max-width: 800px) {
  .header-contact { display: none; }
  .hero.hero-cinematic { min-height: 870px; height: auto; padding: 108px 20px 360px; }
  .hero-cinematic h1 { font-size: clamp(52px,14vw,72px); }
  .hero-cinematic .hero-copy > p { max-width: 510px; }
  .hero-trust { gap: 8px 16px; margin-top: 20px; }
  .hero-cinematic .hero-network { top: auto; right: 20px; bottom: 78px; left: 20px; height: 300px; }
  .hero-film-card { width: 100%; }
  .hero-film-card video { aspect-ratio: 16 / 8.4; }
  .hero-route-card { right: 10px; bottom: -20px; width: calc(100% - 20px); padding: 13px; }
  .hero-route-card > p { display: none; }
  .hero-route-card ul { margin-top: 10px; }
  .hero-output-card { display: none; }
  .account-entry { grid-template-columns: 1fr; gap: 38px; }
  .account-entry-copy h3 { max-width: 580px; }
  .account-entry-copy p { max-width: 580px; }
  .director-live-frame video { aspect-ratio: 16 / 9; }
  .rendered-work-heading { grid-template-columns: 1fr; gap: 22px; }
  .rendered-work-heading > p:last-child { grid-column: auto; }
  .rendered-work-grid { grid-template-columns: 1fr; }
  .rendered-work-figure-film { grid-row: auto; }
  .rendered-work-figure-film img,
  .rendered-work-figure-review img,
  .rendered-work-figure-route img { aspect-ratio: 16 / 9; }
  .rendered-work-disclosure { margin-left: 0; text-align: left; }
}

@media (max-width: 560px) {
  .hero.hero-cinematic { min-height: 0; height: auto; padding: 108px 20px 72px; }
  .hero-cinematic h1 { font-size: 49px; }
  .hero-cinematic .hero-copy > p { font-size: 14px; }
  .hero-trust span:nth-child(3) { display: none; }
  .hero-cinematic .hero-network {
    position: relative;
    inset: auto;
    display: grid;
    height: auto;
    gap: 14px;
    margin-top: 34px;
    overflow: visible;
  }
  .hero-cinematic .hero-network::after,
  .hero-cinematic .hero-signal-field { display: none; }
  .hero-film-card {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }
  .hero-film-card::after { inset: 0; }
  .hero-film-card figcaption { display: none; }
  .hero-route-card {
    position: relative;
    inset: auto;
    width: 100%;
    box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  }
  .hero-route-card li { grid-template-columns: 20px minmax(0,1fr); padding: 6px; }
  .hero-route-card li small { display: none; }
  .director-live-frame figcaption { right: 12px; bottom: 10px; left: 12px; grid-template-columns: auto 1fr; }
  .director-live-frame figcaption strong { display: none; }
  .director-live-frame figcaption i { display: none; }
  .account-mode-tabs button { padding: 0 5px; font-size: 11px; }
  .web-register-form .button,
  .web-login-form .button,
  .web-activate-form .button,
  .web-reset-request-form .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-route-progress i::after { animation: none; transform: none; }
  .hero-film-card { transition: none; }
}