/* Home: hero + reel, measured figures, the slate, what ships, deals, studio, contact. */
/* hero: copy and reel side by side, sized by the shorter of width/height */
  .hero { position: relative; padding: clamp(28px, 6vh, 72px) 0 clamp(36px, 6vh, 72px); isolation: isolate; }
  .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 72% 45%, #D9B25A17, transparent 70%), radial-gradient(40% 60% at 10% 0%, #D9B25A0d, transparent 70%); }
  .hero .stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .hero .copy { container-type: inline-size; }
  .hero h1 { font-size: clamp(36px, min(11.6cqi, 10.5vh), 98px); }
  .hero p { color: #d8d2c6; font-size: clamp(16px, 1.2vw, 18px); margin-top: clamp(16px, 3vh, 28px); max-width: 44ch; }
  .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 3.5vh, 32px); }
  /* the reel sits in a gold viewfinder: four corner marks, like a camera monitor */
  .reel { position: relative; }
  .reel .frame { position: relative; padding: 10px; }
  .reel .frame::before, .reel .frame::after, .reel .frame i::before, .reel .frame i::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--gold); }
  .reel .frame::before { left: 0; top: 0; border-width: 1px 0 0 1px; } .reel .frame::after { right: 0; top: 0; border-width: 1px 1px 0 0; }
  .reel .frame i::before { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .reel .frame i::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
  .reel video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--floor-2); box-shadow: 0 30px 80px #000a; }
  .reel .prog { display: block; height: 1px; background: var(--rule); margin: 0 10px; }
  .reel .prog i { display: block; height: 100%; width: 0; background: var(--gold); }
  .reel .bar { display: flex; justify-content: space-between; gap: 16px; padding: 10px 10px 0; color: var(--soft); }
  .reel .bar b { color: var(--gold-hi); font-weight: 500; }
  .reel .rec { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E8233F; margin-right: 8px; vertical-align: 1px; }

  /* the slate, measured: four figures straight from the reports */
  .figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(28px, 5vh, 56px); }
  .figures div { padding: 22px 20px 24px; border-right: 1px solid var(--rule); container-type: inline-size; }
  .figures div:first-child { padding-left: 0; } .figures div:last-child { border-right: 0; }
  .figures b { display: block; font-size: clamp(30px, min(20cqi, 4vw), 56px); line-height: 1; }
  .figures span { display: block; margin-top: 10px; color: var(--soft); font-size: 14px; }

  /* the slate */
  .title { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 32px; border-top: 1px solid var(--rule); padding: 34px 0; align-items: start; }
  .title > div { container-type: inline-size; }
  .title .n { font: 500 13px var(--mono); color: var(--gold); padding-top: 10px; }
  .title h3 { font-size: clamp(36px, min(11cqi, 5vw), 74px); }
  .title:hover h3 { animation: shine 1.6s cubic-bezier(.3,.6,.2,1) 1; }
  .title h3 { background: linear-gradient(105deg, transparent 42%, #fffbe8d9 50%, transparent 58%) 100% 0 / 300% 100% no-repeat, var(--gold-metal); -webkit-background-clip: text; background-clip: text; }
  .title .kicker { color: #cfc8ba; margin: 16px 0 24px; max-width: 46ch; }
  .facts { display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 28px; }
  .facts dt { font: 500 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; grid-row: 1; }
  .facts dd { grid-row: 2; font: 600 16px/1.3 var(--text); font-variant-numeric: tabular-nums; }
  .status { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #cfc8ba; }
  .status i { width: 7px; height: 7px; background: var(--c); transform: rotate(45deg); }
  .title .more { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; font: 600 14px var(--text); color: var(--gold-hi); border-bottom: 1px solid var(--gold-line); padding-bottom: 3px; transition: border-color .3s; }
  .title .more:hover { border-color: var(--gold); }
  .still { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--floor-2); outline: 1px solid var(--rule); outline-offset: 6px; transition: outline-color .4s; }
  .title:hover .still { outline-color: var(--gold-line); }
  .still video, .still img { width: 100%; height: 100%; object-fit: cover; }
  .still .cap { position: absolute; left: 10px; bottom: 10px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: #07080Bd0; padding: 5px 8px; }
  .still .tag { position: absolute; right: 10px; top: 10px; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--floor); background: var(--c); padding: 4px 7px; }
  .pending h3 { opacity: .55; }
  .pending .still { display: grid; place-items: center; outline-style: dashed; background: repeating-linear-gradient(135deg, #0c0d10 0 14px, #0a0a0d 14px 28px); }
  .pending .still span { font: 500 12px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; text-align: center; line-height: 1.8; }

  /* what ships */
  .credits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
  .credit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .credit b { font-size: 19px; line-height: 1.1; font-stretch: 112%; }
  .credit span { color: var(--soft); font-size: 15px; }

  /* deals: a hallmark letter per deal */
  .deals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
  .deal { padding: 26px 26px 32px; border-right: 1px solid var(--rule); container-type: inline-size; }
  .deal:first-child { padding-left: 0; } .deal:last-child { border-right: 0; }
  .deal .letter { display: block; font-size: 64px; line-height: .9; }
  .deal h3 { font-size: clamp(18px, 9cqi, 24px); font-stretch: 112%; margin: 18px 0 10px; }
  .deal p { color: var(--soft); font-size: 15px; }
  .path { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
  .path li { position: relative; border-top: 1px solid var(--rule); padding-top: 16px; }
  .path li::before { content: ''; position: absolute; left: 0; top: -1px; width: 48px; height: 1px; background: var(--gold); }
  .path .mono { color: var(--gold); }
  .path b { display: block; font: 650 17px var(--text); margin: 6px 0 4px; }
  .path span { color: #a8a296; font-size: 14px; }

  /* studio */
  .studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .studio p { color: #d0cabe; font-size: 18px; max-width: 52ch; }
  .studio p + p { margin-top: 16px; }
  .studio ul { list-style: none; border-top: 1px solid var(--rule); }
  .studio li { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--soft); }
  .studio li b { font: 500 12px var(--mono); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }

  /* contact: the vault door, the emblem behind it */
  .contact { position: relative; overflow: hidden; margin-top: clamp(96px, 14vh, 150px); background: radial-gradient(60% 90% at 85% 50%, #D9B25A12, transparent 70%), var(--floor-2); border-top: 1px solid var(--gold-line); isolation: isolate; }
  .contact .emblem { position: absolute; right: -6%; top: 50%; width: min(560px, 56vw); transform: translateY(-50%); opacity: .07; z-index: -1; pointer-events: none; }
  .contact .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; padding-top: 88px; padding-bottom: 88px; }
  .contact .copy { container-type: inline-size; }
  .contact h2 { font-size: clamp(40px, min(10.5cqi, 7vw), 84px); }
  .contact p { font-size: 17px; color: #d0cabe; margin: 22px 0 26px; max-width: 46ch; }
  .contact a.mail { font: 500 clamp(14px, 1.5vw, 19px) var(--mono); color: var(--gold-hi); border-bottom: 1px solid var(--gold); overflow-wrap: anywhere; }
  .form { display: grid; gap: 14px; align-content: start; }
  .form label { display: grid; gap: 4px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
  .form input, .form select { font: 400 16px var(--text); color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid #ffffff2a; padding: 8px 0 10px; border-radius: 0; outline: 0; transition: border-color .3s; }
  .form input:focus, .form select:focus { border-color: var(--gold); }
  .form select option { background: var(--floor-2); }
  .form .btn { margin-top: 12px; width: max-content; }
  .form .note { font: 400 12px var(--mono); color: var(--dim); }

  /* motion: only transform/opacity; reduced motion shows everything at once */
  .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .title:hover h3 { animation: none; } }

  @media (max-width: 1100px) {
    .hero .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .credits { grid-template-columns: 1fr; }
    .deals { grid-template-columns: 1fr 1fr; } .deal:nth-child(2) { border-right: 0; } .deal:nth-child(3) { padding-left: 0; }
    .deal { border-bottom: 1px solid var(--rule); }
    .path { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .studio, .contact .wrap { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .hero .stage { grid-template-columns: 1fr; }
    .hero h1 { font-size: clamp(36px, 11cqi, 84px); }
    .figures { grid-template-columns: 1fr 1fr; } .figures div:nth-child(2) { border-right: 0; } .figures div:nth-child(3) { padding-left: 0; } .figures div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
    .title { grid-template-columns: 1fr; gap: 14px; padding: 28px 0 32px; }
    .title .still { order: -1; outline-offset: 4px; } .title .n { padding: 0; }
    .title h3 { font-size: clamp(34px, 11cqi, 64px); }
  }
  @media (max-width: 560px) {
    .figures div { padding: 18px 12px 20px 0; } .figures div + div { padding-left: 12px; } .figures div:nth-child(3) { padding-left: 0; }
    .facts { grid-template-columns: repeat(2, max-content); } .facts dt:nth-of-type(n+3) { grid-row: 3; } .facts dd:nth-of-type(n+3) { grid-row: 4; }
    .credit { grid-template-columns: 1fr; gap: 4px; }
    .deals, .path { grid-template-columns: 1fr; } .deal, .deal:nth-child(3) { padding: 22px 0; border-right: 0; }
    .studio li { grid-template-columns: 1fr; gap: 2px; }
  }