:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #050505; }
body { min-width: 710px; color: #eee2d2; font-family: Georgia, serif; }
.site { position: relative; width: min(100%, 1100px); margin: 0 auto; background: #050505; line-height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 710px) { body { overflow-x: auto; } }

.site-nav { position: relative; z-index: 3; width: 96.1%; margin: 0 auto; min-height: 43px; padding: 0 1.15%; display: flex; align-items: center; justify-content: space-between; gap: 1.1%; border: 0; border-bottom: 1px solid #a58856; background: #090807; line-height: 1.2; white-space: nowrap; }
.site-nav a, .site-nav button { color: #e9decf; text-decoration: none; font: clamp(9px, 1.12vw, 13px)/1.2 Georgia, serif; background: transparent; border: 0; padding: 9px 1px; white-space: nowrap; }
.site-nav a { cursor: pointer; }
.site-nav button { cursor: default; }
.site-nav .current { color: #fff; border-bottom: 2px solid #c50019; }
.site-nav button span { color: #c50019; margin-right: 4px; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; text-decoration: underline; }

/* One approved Home masthead is reused without changing its artwork. */
/* Shared masthead geometry: the divider is inset to the same 1.95% frame on every page. */
.masthead { position: relative; width: 100%; aspect-ratio: 1078 / 164; line-height: normal; }
.masthead::after { content: ""; position: absolute; z-index: 4; left: 1.95%; right: 1.95%; bottom: 0; border-bottom: 1px solid #a58856; pointer-events: none; }
.masthead-visual { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.masthead-art { position: absolute; display: block; top: 0; left: 0; width: 100%; height: auto; clip-path: inset(0 1.95% 0 1.95%); }
.home-brand { position: absolute; left: 16.7%; top: 0; width: 32.5%; height: 100%; overflow: hidden; background: #050505; }
.home-brand img { position: absolute; display: block; left: -21.7%; top: 0; width: 307.7%; max-width: none; height: auto; }
.brand-subtitle { position: absolute; color: #d7c6a7; background: #050505; font: clamp(7px, 1.15vw, 12px)/1 Georgia, serif; letter-spacing: .29em; white-space: nowrap; }
.home-subtitle { left: 21.4%; top: 61%; width: 17.6%; height: 18%; padding: .48% 0 0 1.1%; }
.nav-home-mask { position: absolute; left: 27.4%; top: 91%; width: 9.4%; height: 6.8%; background: #050505; }
.active-rule { position: absolute; display: none; top: 92.5%; width: 8.6%; border-bottom: 3px solid #c90019; }
.home-page .active-rule { display: block; left: 27.6%; }
.cases-page .active-rule { display: block; left: 38%; width: 13%; }
.about-page .active-rule { display: block; left: 53.2%; width: 10.3%; }

/* The same clickable header coordinates apply to every page. */
.hotspot { position: absolute; display: block; background: transparent; border: 0; padding: 0; color: transparent; cursor: default; }
.hotspot[href] { cursor: pointer; }
.hotspot:focus-visible, .page-menu summary:focus-visible { outline: 2px solid #d2aa65; outline-offset: -2px; }
.masthead .home { left: 27%; top: 73.3%; width: 9%; height: 25.8%; }
.masthead .cases { left: 37.5%; top: 73.3%; width: 15%; height: 25.8%; }
.masthead .about { left: 53%; top: 73.3%; width: 10%; height: 25.8%; }
.masthead .trailer { left: 63.4%; top: 73.3%; width: 20%; height: 25.8%; }
.masthead .contact { left: 84%; top: 73.3%; width: 13%; height: 25.8%; }
.page-menu { position: absolute; z-index: 5; left: 0; top: 0; width: 47%; height: 72%; }
.page-menu summary { display: block; width: 100%; height: 100%; cursor: pointer; list-style: none; }
.page-menu summary::-webkit-details-marker { display: none; }
.page-list { position: absolute; top: 100%; left: 0; width: max-content; min-width: 220px; max-width: 90vw; padding: 9px 0; border: 1px solid #a58856; background: #080707f2; box-shadow: 0 8px 25px #000c; }
.page-list a { display: block; padding: 10px 17px; color: #e6d8bf; font: 14px/1.2 Georgia, serif; text-decoration: none; white-space: nowrap; }
.page-list a:hover, .page-list a:focus-visible { color: #fff; background: #3e1b17; }

/* Only the old, inconsistent mastheads are hidden; approved page body art remains. */
.art-window { position: relative; overflow: hidden; width: 100%; }
.art-window .design { display: block; width: 100%; height: auto; clip-path: inset(0 1.95% 0 1.95%); }
.how-page .design { clip-path: inset(0 2.3% 1% 2.3%); }
.about-page .design { clip-path: inset(0 1.95% 1% 1.95%); }
.home-page .design { margin-top: -20.9647%; }
.cases-page .design { margin-top: -18.5915%; }
.how-page .design { margin-top: -6.1972%; }
.coming-page .design { margin-top: -7.0423%; }
.about-page .design { margin-top: -8.5915%; }
.legal-page .design { margin-top: -8.8028%; }
.full-page-frame { position: absolute; z-index: 2; left: 1.95%; right: 1.95%; top: 0; bottom: 0; border: 1px solid #a58856; border-bottom-width: 2px; pointer-events: none; }

/* Approved icon replacement and links over existing artwork. */
.app-icon { position: absolute; left: 5.75%; top: 44.2%; width: 7.89%; height: 6.65%; overflow: hidden; border-radius: 16%; background: #080807; pointer-events: none; }
.app-icon img { position: absolute; display: block; width: 119%; max-width: none; height: auto; left: -10.9%; top: -62.3%; }
.home-how { left: 2%; top: 51.9%; width: 96%; height: 13.4%; }
.home-coming { left: 15.4%; top: 44.1%; width: 34%; height: 6.7%; }
.how-coming { left: 5.3%; top: 88%; width: 39%; height: 5.6%; }
.coming-llc-cover { position: absolute; left: 28.2%; top: 9.16%; width: 6.3%; height: 1.56%; background: #050505; pointer-events: none; }
.coming-footer-contact { left: 87%; top: 96.6%; width: 10%; height: 2.6%; }
.legal-email { left: 64.5%; top: 83.1%; width: 32%; height: 2.1%; }
.legal-footer-contact { left: 87%; top: 97.4%; width: 10%; height: 2.1%; }
.how-number-cover { position: absolute; left: 3.4%; top: .8%; width: 5.8%; height: 3.6%; background: #080707; pointer-events: none; }

/* Cases sharpness correction: preserve the approved Page 2 artwork/layout,
   but replace only the six rasterized card-photo areas with their original
   higher-resolution source images. Borders, titles, locations, buttons,
   hero, footer, and all other artwork remain untouched. */
.cases-art-window { position: relative; }
.cases-sharp-photos { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.case-photo-sharp { position: absolute; display: block; object-fit: cover; }
.case-photo-sharp.c1 { left: 2.3944%; top: 18.2213%; width: 30.5634%; height: 21.5835%; object-position: center 58%; }
.case-photo-sharp.c2 { left: 34.6479%; top: 18.2213%; width: 30.7042%; height: 21.5835%; object-position: center 62%; }
.case-photo-sharp.c3 { left: 67.0423%; top: 18.2213%; width: 30.7042%; height: 21.5835%; object-position: center center; }
.case-photo-sharp.c4 { left: 2.3944%; top: 50.6508%; width: 30.5634%; height: 22.5597%; object-position: center center; }
.case-photo-sharp.c5 { left: 34.6479%; top: 50.6508%; width: 30.7042%; height: 22.5597%; object-position: center center; }
.case-photo-sharp.c6 { left: 67.0423%; top: 50.6508%; width: 30.7042%; height: 22.5597%; object-position: center 35%; }


/* 2026-10-02 consolidated clarity pass.
   Narrow fixes only: sharpened assets plus live text where the flattened
   artwork was soft. Layout, wording, colors, and approved compositions stay put. */

/* Cleaner shared brand patch instead of magnifying a full 710px page screenshot. */
.home-brand {
  left: 16.7%;
  top: 2%;
  width: 32.5%;
  height: 94%;
  background: #050505;
}
.home-brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

/* Replace the fuzzy rasterized right-column masthead copy with live text. */
.masthead-tagline {
  position: absolute;
  z-index: 5;
  right: 2.35%;
  top: 16%;
  width: 9.8%;
  min-height: 66%;
  padding: .25em .35em;
  background: #050505;
  color: #d9c39a;
  font: italic clamp(8px, .95vw, 12px)/1.18 Georgia, serif;
  letter-spacing: .01em;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

/* How It Works: crisp live descriptions over the soft flattened text.
   Each inset stops short of the approved gold card borders. */
.how-copy-sharp {
  position: absolute;
  z-index: 4;
  top: 49.45%;
  min-height: 12.8%;
  padding: .15em .25em .2em;
  background: #080706;
  color: #f0e8dc;
  font: clamp(12px, 1.45vw, 18px)/1.27 Georgia, serif;
  text-align: left;
  line-height: 1.27;
  pointer-events: none;
}
.how-copy-sharp.h1 { left: 4.25%; width: 14.9%; }
.how-copy-sharp.h2 { left: 23.2%; width: 15.6%; }
.how-copy-sharp.h3 { left: 42.1%; width: 15.8%; }
.how-copy-sharp.h4 { left: 61.5%; width: 14.8%; }
.how-copy-sharp.h5 { left: 80.0%; width: 15.5%; }

.fingerprint-clean {
  position: absolute;
  z-index: 5;
  left: 84.55%;
  top: 41.15%;
  width: 5.65%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Coming Soon: restore readable body copy without touching the approved art. */
.coming-copy-sharp {
  position: absolute;
  z-index: 4;
  left: 7.45%;
  top: 33.35%;
  width: 51.5%;
  min-height: 21.4%;
  padding: .15em 1.1em .2em .1em;
  background: linear-gradient(90deg, rgba(5,5,5,.99) 0%, rgba(5,5,5,.98) 78%, rgba(5,5,5,.84) 92%, rgba(5,5,5,0) 100%);
  color: #eee7dc;
  font: clamp(13px, 1.55vw, 19px)/1.34 Georgia, serif;
  line-height: 1.34;
  pointer-events: none;
}
.coming-copy-sharp p { margin: 0 0 1.05em; }
.coming-copy-sharp p:last-child { margin-bottom: 0; }

/* About: crisp company paragraphs over the soft flattened copy. */
.about-copy-sharp {
  position: absolute;
  z-index: 4;
  left: 8.8%;
  top: 48.95%;
  width: 83%;
  min-height: 17.7%;
  padding: .1em .25em .25em;
  background: linear-gradient(90deg, rgba(5,5,5,.995) 0%, rgba(5,5,5,.985) 88%, rgba(5,5,5,.92) 100%);
  color: #efe7db;
  font: clamp(13px, 1.55vw, 19px)/1.36 Georgia, serif;
  line-height: 1.36;
  text-align: left;
  pointer-events: none;
}
.about-copy-sharp p { margin: 0 0 1em; }
.about-copy-sharp p:last-child { margin-bottom: 0; }

/* Let Chromium/Edge use normal interpolation on the new higher-resolution assets. */
.design, .masthead-art, .case-photo-sharp, .home-brand img, .fingerprint-clean {
  image-rendering: auto;
}


/* Final alignment refinements after visual review. */
.masthead-tagline {
  right: 1.95%;
  top: 0;
  width: 10.55%;
  height: 100%;
  min-height: 100%;
  padding: 1.25em .55em 0 .7em;
  border-left: 1px solid #a58856;
  background: #050505;
  font-size: clamp(8px, .92vw, 12px);
  line-height: 1.18;
}

.how-copy-sharp {
  top: 49.45%;
  min-height: 13.15%;
  padding: .15em .35em .2em;
  background: #080706;
}
.how-copy-sharp.h1 { left: 2.95%; width: 16.55%; }
.how-copy-sharp.h2 { left: 22.15%; width: 16.75%; }
.how-copy-sharp.h3 { left: 41.05%; width: 16.9%; }
.how-copy-sharp.h4 { left: 60.35%; width: 16.15%; }
.how-copy-sharp.h5 { left: 79.15%; width: 16.7%; }

.coming-copy-sharp {
  left: 7.25%;
  top: 33.2%;
  width: 55.8%;
  min-height: 22.4%;
  padding: .2em .9em .25em .2em;
  background: linear-gradient(90deg, #050505 0%, #050505 92%, rgba(5,5,5,.9) 97%, rgba(5,5,5,0) 100%);
}

.about-copy-sharp {
  left: 8.45%;
  top: 48.85%;
  width: 84.6%;
  min-height: 18.1%;
  padding: .15em .35em .3em;
  background: #050505;
}

.coming-copy-sharp {
  background: linear-gradient(90deg, #050505 0%, #050505 78%, rgba(5,5,5,.98) 84%, rgba(5,5,5,.8) 92%, rgba(5,5,5,0) 100%);
}



/* 2026-10-02 header correction v2 — exact two-item fix only.
   A) Complete the gold header box around the Cinematic mysteries cell.
   B) Use the sharpened existing header-brand image; do not redraw/retype TWISTED. */
.masthead-tagline {
  border-left: 1px solid #a58856;
  border-right: 1px solid #a58856;
  border-bottom: 1px solid #a58856;
}


/* 2026-10-02 masthead fidelity v4.
   One shared header brand component on all six pages.
   Text is live HTML for crisp rendering. The Z/flower/blood is a true transparent PNG.
   No opaque pasted black logo image is used. Gold header box/rule from approved v2 is unchanged. */
.home-brand {
  position: absolute;
  z-index: 6;
  left: 16.7%;
  top: 2%;
  width: 32.5%;
  height: 94%;
  overflow: visible;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1%;
  padding: 0 .6% 0 1.2%;
  line-height: 1;
}
.home-brand > img { position: static; }
.brand-words {
  width: 69%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-1%);
}
.brand-title-live {
  color: #f0e6d6;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(19px, 2.45vw, 31px);
  font-weight: 400;
  letter-spacing: .35em;
  padding-left: .35em;
  white-space: nowrap;
  text-shadow: 0 0 .35px #fff;
}
.brand-sub-live {
  width: 100%;
  margin-top: .42em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  color: #e7ddcf;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(7px, .92vw, 12px);
  font-weight: 600;
  letter-spacing: .31em;
  white-space: nowrap;
}
.brand-rule-live {
  display: block;
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background: #c9b68f;
  opacity: .9;
}
.brand-z-live {
  width: 29%;
  max-width: 29%;
  height: 94%;
  object-fit: contain;
  object-position: center;
  display: block;
  image-rendering: auto;
}

/* 2026-10-02 v6: exact reference Z + centered masthead tagline.
   Keep TWISTED / INTERACTIVE LLC as the crisp live text from v4.
   The Z asset comes from ZZ's supplied reference and is reused on all six pages. */
.masthead-tagline {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 .45em;
  line-height: 1.14;
}
.home-brand {
  overflow: visible;
}
.brand-z-live {
  width: 30%;
  max-width: 30%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  image-rendering: auto;
  flex: 0 0 30%;
}

/* 2026-10-02 v8: visible size correction for header Z only.
   Preserve the same 30% layout slot so TWISTED / INTERACTIVE LLC do not shift.
   Scale the Z artwork itself down 22% around its center. */
.brand-z-live {
  width: 30% !important;
  max-width: 30% !important;
  height: 100% !important;
  flex: 0 0 30% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: scale(0.78);
  transform-origin: center center;
}
.brand-words {
  width: 69% !important;
}