/* ==========================================================
   JUST BLOOD - Homepage (v17) per JB_Full_View_FINALS.psb
   Design width 1366px; sizes scale with the screen.
   ========================================================== */
html.no-top-nav, html.no-top-nav body { background:#000; }
.hr-gradient { height:1px; margin:0 auto; max-width:1262px; background:linear-gradient(90deg,#e83e8c,#2fc3d2); }

/* ---------- 1. Hero ---------- */
.hero { position:relative; z-index:2; background:#000; }
.hero-bg { position:relative; z-index:0; }
.hero-bg { display:block; width:100%; height:auto; }
.hero-shade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 22%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 52%),
             linear-gradient(180deg,rgba(0,0,0,0) 70%,#000 100%); }
.hero-logo { position:absolute; top:2.2vw; left:2.85vw; z-index:3; display:inline-flex; }
.hero-logo .logo-img { height:clamp(20px,1.98vw,56px); width:auto; }
.hero-copy { position:absolute; z-index:2; left:2.5vw; top:7.6vw; width:42vw; }
.h-saw { margin:0 0 .35vw; font-size:2.7vw; line-height:1.15; color:#fff; letter-spacing:-.005em; }
.hero h1 { margin:0; font-weight:700; line-height:.98; letter-spacing:-.035em; }
.h-now, .h-will, .h-edison { display:block; }
.h-now { font-size:4.75vw; color:#fff; margin-bottom:.4vw; }
.h-red { color:#f20562; }
.h-will { font-size:5.71vw; }
.h-edison { font-size:6.6vw; }
.h-tech { display:block; width:36.5vw; height:auto; margin:.9vw 0 0 .1vw; }
.h-seen { margin:2.2vw 0 .9vw; padding-left:5.4vw; font-size:1.62vw; font-weight:700; letter-spacing:.12em; color:#fff; }
.h-billboard { display:block; width:35vw; height:auto; margin-left:-.8vw; }
.scroll-ind { position:absolute; left:50%; bottom:1.6vw; transform:translateX(-50%); z-index:3;
  color:#fff; font-size:clamp(10px,.75vw,18px); font-weight:300; letter-spacing:.3em; text-decoration:none; text-align:center; }
.scroll-ind::after { content:""; display:block; width:1px; height:34px; margin:8px auto 0; background:#fff; opacity:.8; }

@media (max-width:900px) {
  .hero-shade { background:linear-gradient(180deg,rgba(0,0,0,0) 55%,#000 100%); height:56vw; }
  .hero-logo { top:14px; left:16px; }
  .hero-copy { position:relative; left:auto; top:auto; width:auto; padding:18px 20px 70px; }
  .h-saw { font-size:22px; } .h-now { font-size:40px; } .h-will { font-size:46px; } .h-edison { font-size:52px; }
  .h-tech { width:min(320px,86%); margin-top:10px; }
  .h-seen { font-size:14px; padding-left:0; margin:22px 0 10px; }
  .h-billboard { width:min(360px,100%); margin-left:0; }
  .scroll-ind { bottom:18px; }
}

/* ---------- 2. Conversation intro ---------- */
.studio { position:relative; z-index:1; background:#000; overflow:hidden; text-align:center; }
.studio-bg { display:block; width:100%; height:auto; }
.studio::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 18%,rgba(0,0,0,.25) 80%,#000 100%); pointer-events:none; }
.studio-copy { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:3vw; }
.s-small { margin:0; font-size:3.15vw; font-weight:700; letter-spacing:-.02em; color:#f4f5f7; line-height:1.1; }
.s-name { margin:.4vw 0; font-size:5vw; font-weight:700; letter-spacing:-.025em; color:#5dbbcc; line-height:1.05; }
.s-rule { display:block; width:4.6vw; height:2px; background:#5dbbcc; margin:1.3vw auto; }
.s-taped { margin:.6vw 0 0; font-size:2.3vw; line-height:1.2; color:#fff; }
.s-c { color:#5dbbcc; }
.s-excl { margin:1.3vw 0 0; font-size:1.75vw; line-height:1.25; color:#fff; }
.s-movie { margin:.6vw 0 0; font-size:2.8vw; font-weight:700; color:#5dbbcc; }
@media (max-width:900px) {
  .studio { padding:0 0 60px; }
  .studio-bg { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.55; }
  .studio-copy { position:relative; padding:70px 20px 30px; }
  .s-small { font-size:22px; } .s-name { font-size:34px; margin:6px 0; } .s-rule { width:44px; margin:14px auto; }
  .s-taped { font-size:19px; margin-top:6px; } .s-excl { font-size:16px; margin-top:14px; } .s-movie { font-size:26px; margin-top:6px; }
}

/* ---------- 3 & closing. Phone call ---------- */
.call { background:radial-gradient(ellipse 38% 55% at 68% 50%, rgba(32,96,104,.55), rgba(0,0,0,0) 70%), #000; padding:90px 20px 70px; }
.call-inner { max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; }
.call-phone { width:min(387px,30vw); height:auto; display:block; }
.call-close .call-phone { width:min(420px,31vw); }
.line { margin:0 0 46px; padding-left:28px; border-left:2px solid transparent; }
.call-open .line { margin-bottom:62px; }
.call-close .line { margin-bottom:92px; }
.line .who { display:block; font-size:13px; font-weight:700; letter-spacing:.18em; margin:0 0 14px 112px; color:#c8c8c8; }
.line.ryan { border-left-color:#3c7f8c; }
.line.ryan .who { color:#5dbbcc; }
.line p { margin:0; color:#fff; }
.call .line p { font-size:clamp(24px,2.9vw,40px); line-height:1.2; letter-spacing:-.01em; }
.call-close .line p { font-size:clamp(22px,2.2vw,30px); }
.call .line:last-child { margin-bottom:0; }
@media (max-width:760px) {
  .call-open .line, .call-close .line { margin-bottom:40px; }
  .call { padding:60px 20px 50px; background:radial-gradient(ellipse 80% 40% at 50% 85%, rgba(32,96,104,.5), rgba(0,0,0,0) 70%), #000; }
  .call-inner { grid-template-columns:1fr; gap:36px; }
  .call-phone, .call-close .call-phone { width:min(260px,70%); margin:0 auto; }
  .line .who { margin-left:0; }
}

/* ---------- 4. Transcript ---------- */
.transcript { background:#000; padding:10px 20px 90px; }
.transcript-inner { max-width:880px; margin:0 auto; padding:52px 34px 40px; background:linear-gradient(180deg,#04070a,#050a0e); border-top:1px solid #182229; }
.transcript .line { margin-bottom:34px; padding-left:22px; }
.transcript .line .who { font-size:11px; margin:0 0 10px 160px; }
.transcript .line p { font-size:clamp(16px,1.55vw,21px); line-height:1.8; }
@media (max-width:760px) {
  .transcript { padding:0 0 60px; }
  .transcript-inner { padding:36px 18px 20px; }
  .transcript .line { padding-left:14px; }
  .transcript .line .who { margin-left:0; }
  .transcript .line p { line-height:1.65; }
}

/* ---------- Technology section ---------- */
.amp-head { background:#000; text-align:center; padding:70px 20px 30px; }
.amp-head h2 { margin:0; font-weight:700; line-height:1.12; letter-spacing:-.01em; }
.amp-title { display:block; color:#2fc3d2; font-size:clamp(26px,3.22vw,44px); }
.amp-sub { display:block; color:#fff; font-size:clamp(20px,2.5vw,34px); }
html.no-top-nav .deck-slide { background:#000; }
html.no-top-nav .deck-slide .slide-title .cyan { color:#2fc3d2; }
@media (min-width:900px) { html.no-top-nav .deck-inner { align-items:flex-start; } }
html.no-top-nav #technology ~ .tech-slide, html.no-top-nav .tech-slide { padding:0; background:#000; min-height:0; }
html.no-top-nav .tech-slide .tech-inner { width:100%; max-width:none; }

/* ---------- Explore ---------- */
.explore17 { background:#000; padding:56px 20px 50px; text-align:center; }
.explore17 h2 { margin:0 0 50px; font-size:clamp(24px,2.35vw,32px); font-weight:700; color:#fff; }
.ex-grid { display:grid; grid-template-columns:repeat(4, minmax(0,251px)); justify-content:center; gap:16px; }
.ex-tile { display:flex; flex-direction:column; align-items:center; padding:3px 3px 14px; background:#000;
  border:2px solid #19c3d6; border-radius:8px; color:#fff; text-decoration:none;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.ex-tile img { width:100%; height:auto; display:block; border-radius:5px 5px 0 0; }
.ex-label { margin-top:6px; font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.ex-label.mixed { text-transform:none; }
.ex-rule { width:30px; height:2px; background:#19c3d6; margin:8px 0 10px; }
.ex-arrow { color:#19c3d6; display:inline-flex; }
.ex-arrow svg { width:26px; height:26px; }
.ex-tile:hover, .ex-tile:focus-visible { box-shadow:0 0 26px rgba(25,195,214,.45); transform:translateY(-3px); border-color:#5ff0ff; }
@media (max-width:1100px) { .ex-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:760px) { .ex-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .ex-label { font-size:13px; } }

/* ---------- Footer ---------- */
.foot17 { background:#000; text-align:center; padding:20px 0 0; }
.foot-logo { display:inline-flex; }
.foot-logo .logo-img { height:24px; width:auto; }
.foot-top { display:block; margin:12px auto 32px; width:max-content; color:#2fa8ff; font-size:13px; letter-spacing:.04em; text-decoration:underline; text-underline-offset:3px; }
.foot-top:hover { color:#fff; }
.si-strip { display:block; width:100%; height:auto; }

@media (min-width:600px) and (max-width:900px) {
  .hero-copy { padding:28px 40px 80px; }
  .h-saw { font-size:28px; } .h-now { font-size:54px; } .h-will { font-size:64px; } .h-edison { font-size:74px; }
  .h-tech { width:min(440px,70%); } .h-seen { font-size:17px; } .h-billboard { width:min(460px,80%); }
  .s-small { font-size:30px; } .s-name { font-size:48px; } .s-taped { font-size:24px; } .s-excl { font-size:19px; } .s-movie { font-size:32px; }
}