/* Real-material direction. The original edition has its own untouched site. */
:root { --green-dark: #19c37d; }
.cinema__grain { display: none; }
.cinema__corner, .cinema__meta, .cinema__cut { display: none; }
.cinema__vignette { box-shadow: inset 0 0 11vw rgba(13,25,24,.14); }
.cinema__matte { height: 6px; background: #0b0c0e; }
.hud { padding-block: 27px; }
.hud__phase { padding: 10px 13px; background: rgba(242,241,237,.86); color: #0b0c0e; border: 1px solid rgba(20,40,35,.1); }
.hud.on-dark .hud__phase, .hud.on-sky .hud__phase { background: rgba(10,24,28,.72); color: #f2f1ed; border-color: #d4ddd51c; }
.hero-bg { background: radial-gradient(ellipse at 48% 47%, #fffdf8 0, #f2f1ed 53%, #e5e5df 100%); }
.hero-bg::before { display: none; }
.hero-bg::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 10%; background: linear-gradient(transparent, #8b99943b); }
.hero-reel { top: 20%; left: 7%; color: #67736d; font-size: 12px; letter-spacing: .2em; }
.hero-kicker { margin-bottom: 20px; }
.hero-kicker span { font-size: clamp(14px, 2.3vh, 22px); }
.hero-kicker i { display: none; }
.hero-name { bottom: 38vh; }
.hero-letters { font-size: min(47vh, 34vw); line-height: 1; font-weight: 400; letter-spacing: .035em; text-shadow: none; }
.hero-truck { filter: drop-shadow(0 3px 2px #17292138); }
.hero-band { background: linear-gradient(180deg, #182321, #0c1314); }
.hero-band::before { opacity: .08; }
.hero-sub { top: 7vh; }
.hero-sub .hs1 { font-family: var(--jp); font-size: clamp(14px, 1.7vh, 17px); font-weight: 500; letter-spacing: .2em; }
.hero-sub .hs2 { font-size: clamp(22px, 3.8vh, 38px); letter-spacing: .08em; font-weight: 700; }
.hero-chapter { display: none; }
.cue { bottom: 3.3vh; font-size: 11px; }
.sc-road { background: radial-gradient(ellipse at 75% 55%, #d1d5c7, #e7e8dd 46%, #f2f1ed 84%); }
.sc-road::after { opacity: .07; }
.bgwords span { color: #a5afa1; opacity: .12; font-size: 39vh; letter-spacing: .04em; }
.ms { left: 6vw; top: 18vh; width: min(36vw, 450px); padding: 0; background: rgba(242,241,237,.97); border: 0; box-shadow: 0 0 40px 28px rgba(242,241,237,.97); backdrop-filter: none; }
.ms::after { display: none; }
.ms small { width: fit-content; background: #18352b; color: var(--green); padding: 8px 11px; font-size: 12px; letter-spacing: .18em; }
.ms h3 { margin-top: 22px; font-size: clamp(28px, 3.5vw, 52px); line-height: 1.38; letter-spacing: .025em; font-weight: 700; text-wrap: balance; }
.ms p { margin-top: 20px; font-size: 16px; line-height: 2; color: #35413b; max-width: 25em; }
.scene-stamp { font-size: 11px; letter-spacing: .16em; bottom: 6vh; }
.scene-stamp--road { color: #56665b; }
.sc-proc { background: #162023; }
.sc-proc::after { z-index: 1; box-shadow: inset 0 -9vh 10vh #03090b66; background: linear-gradient(180deg, #0a181ecc, transparent 43%); }
.proc-world { z-index: 0; }
.proc-words { display: none; }
.proc-text { inset: 0; width: 100%; z-index: 2; pointer-events: none; }
.st { top: 17vh; left: 6vw; width: min(38vw, 440px); padding: 0; border: 0; background: #132027b3; box-shadow: 0 0 40px 24px #132027b3; }
.st::before { display: none; }
.st .no { display: inline-block; margin-bottom: 15px; font-size: 20px; letter-spacing: .18em; }
.st .no::after { content: " / PROCESS"; color: #a5b7b1; font-size: 12px; }
.st h3 { font-size: clamp(32px, 3.6vw, 50px); font-weight: 700; line-height: 1.35; }
.st p { font-size: 16px; line-height: 1.9; color: #d7dfd7; max-width: 25em; text-shadow: 0 2px 12px #061116; }
.shutter { border-width: 1px; box-shadow: 0 0 12px #d9eee244; }
.sc-sky { background: linear-gradient(180deg, #365766, #769899 45%, #bfcbc3 78%, #ece5d1); }
.sky-wash { background: radial-gradient(ellipse at 73% 65%, #ffe6ae9e, transparent 45%); }
#cl1 { opacity: .8; } #cl2 { opacity: .65; } #cl3 { opacity: .72; }
.sky-head { font-size: clamp(44px, 8vw, 130px); font-weight: 700; letter-spacing: .025em; line-height: 1.5; text-shadow: 0 8px 48px #142e3266; }
.sky-kicker { top: 23%; font-size: 12px; color: #fff; }
.card { border-top-width: 3px; box-shadow: 0 24px 75px #10293133; overflow-y: auto; scrollbar-width: thin; }
.card::after { height: 3px; top: -3px; }
.card h3 b { color: var(--green); }
.dummy-note { margin-top: 15px; color: #68736d; font-size: 12px; line-height: 1.7; }
.card__list > div { font-size: 14px; }
.btn:hover, .btn:focus-visible { transform: none; }
.foot { font-size: 12px; }

@media (max-width: 760px) {
  .hud { padding: 22px 20px; }
  .hud__phase { padding: 6px 9px; gap: 8px; }
  .hud__phase b { font-size: 20px; }
  .hud__phase span { display: inline; font-size: 10px; letter-spacing: .13em; }
  .hero-reel { top: 20%; left: 20px; font-size: 10px; }
  .hero-name { bottom: 39vh; }
  .hero-kicker { margin-bottom: 12px; }
  .hero-sub { top: 5vh; }
  .hero-sub .hs1 { font-size: 12px; letter-spacing: .12em; }
  .hero-sub .hs2 { font-size: 22px; line-height: 1.65; letter-spacing: .01em; }
  .ms { top: 15vh; left: 6vw; width: 87vw; padding: 0; }
  .ms h3 { font-size: 30px; max-width: 12em; margin-top: 15px; }
  .ms p { font-size: 16px; margin-top: 12px; line-height: 1.9; max-width: 25em; }
  .ms small { font-size: 11px; }
  .st { top: 16vh; left: 6vw; width: 88vw; }
  .st h3 { font-size: 32px; }
  .st p { font-size: 16px; line-height: 1.85; }
  .st .no { font-size: 18px; margin-bottom: 10px; }
  .scene-stamp { bottom: 7vh; left: 6vw; font-size: 10px; }
  .scene-stamp i { width: 22px; }
  .card { width: 90vw; max-height: 76vh; gap: 20px; }
  .card__list > div { font-size: 13px; grid-template-columns: 4.8em 1fr; gap: .7em; }
  .card__list dd { overflow-wrap: anywhere; }
  .card__btns { flex-wrap: nowrap; gap: 9px; }
  .btn { padding: 12px 15px; font-size: 13px; }
  .sky-kicker { font-size: 10px; letter-spacing: .2em; }
}
@media (max-height: 560px) and (min-width: 761px) {
  .ms, .st { top: 18vh; }
  .ms h3, .st h3 { font-size: 29px; }
  .ms p, .st p { font-size: 14px; margin-top: 10px; }
  .card { max-height: 78vh; overflow-y: auto; }
}

/* Shipping truck / ending. The road stays in frame through the contact scene. */
.sc-journey { z-index: 1; visibility: hidden; background: radial-gradient(ellipse at 72% 52%, #41534b 0, #22372e 32%, #14261f 61%, #0c1715 100%); --journey-ground: 84vh; }
.journey-light { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(116deg, #07120ed9 0%, transparent 62%), radial-gradient(ellipse at 83% 54%, #a4b69232, transparent 45%); }
.journey-verge { position: absolute; top: calc(var(--journey-ground) - 28px); left: 0; right: 0; height: 29px; background: linear-gradient(#64706028, #b1bfa666 90%, #d5d9c1 93%, #424b3c); opacity: .52; }
.journey-road { position: absolute; top: var(--journey-ground); left: 0; right: 0; bottom: -30vh; overflow: hidden; background: linear-gradient(#27342d, #111b19 35%, #09110f); border-top: 2px solid #73857580; }
.journey-markings { position: absolute; top: 36px; left: -240px; width: calc(100% + 480px); height: 3px; background: repeating-linear-gradient(90deg, #d4d7b8a6 0 118px, transparent 118px 240px); will-change: transform; }
.journey-truck { position: absolute; z-index: 2; top: 0; left: 0; overflow: visible; filter: drop-shadow(0 18px 10px #020b08aa); will-change: transform; }
.journey-kicker { position: absolute; z-index: 3; left: 6vw; top: 18vh; color: var(--green); font: 400 12px/1 var(--display); letter-spacing: .28em; opacity: 0; }
.journey-head { position: absolute; z-index: 3; left: 6vw; top: 23vh; color: #f2f1ed; font-size: clamp(40px, 5.3vw, 88px); font-weight: 700; line-height: 1.45; letter-spacing: .035em; text-shadow: 0 8px 35px #03140fcc; opacity: 0; }
.journey-card { z-index: 4; left: 5vw; top: 13vh; width: min(490px, 42vw); display: block; padding: clamp(22px, 2.4vw, 38px); background: #10231edb; backdrop-filter: blur(14px); color: #f2f1ed; border-top: 1px solid #52695f; box-shadow: 0 12px 40px #0003; }
.journey-card::after { height: 2px; top: -1px; }
.journey-card h3 { font-size: clamp(29px, 2.8vw, 42px); }
.journey-card .card__biz { font-size: 14px; }
.journey-card .card__btns { margin-top: 20px; gap: 10px; }
.journey-card .btn { padding: 12px 17px; border-color: #657b6f; color: #edf1e8; font-size: 13px; }
.journey-card .btn--fill { background: var(--green); color: #10231b; border-color: var(--green); }
.journey-card .btn:hover, .journey-card .btn:focus-visible { color: #10231b; background: #a1dbb8; }
.journey-card .card__list { margin-top: 20px; }
.journey-card .card__list > div { font-size: 14px; border-color: #42594e; grid-template-columns: 4em 1fr; padding: 10px 0; }
.journey-card .card__list dt { color: #a8bbae; }
.journey-card .card__list dd { overflow-wrap: anywhere; }
.journey-card .contact-tel { font-size: 21px; letter-spacing: .05em; line-height: 1.2; white-space: nowrap; }
.license-details summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.license-details summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.license-details ul { list-style: none; margin-top: 12px; }
.license-details li { margin: 9px 0; font-size: 12px; line-height: 1.6; }
.license-details span { white-space: nowrap; }
.company-source { margin-top: 12px; color: #a9c0b2; font-size: 12px; line-height: 1.5; }
.company-source a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .journey-kicker { top: 17vh; left: 6vw; font-size: 11px; }
  .journey-head { top: 22vh; left: 6vw; font-size: clamp(33px, 8.8vw, 56px); }
  .journey-card { left: 5vw; top: 11vh; width: 90vw; padding: 21px 22px; }
  .journey-card h3 { font-size: 29px; margin-top: 10px; }
  .journey-card .card__biz { font-size: 12px; margin-top: 10px; }
  .journey-card .card__btns { margin-top: 15px; }
  .journey-card .card__list { margin-top: 12px; }
  .journey-card .card__list > div { font-size: 13px; padding: 8px 0; }
  .journey-card .contact-tel { font-size: 19px; }
  .journey-markings { top: 28px; }
}
@media (max-height: 560px) and (min-width: 761px) {
  .journey-card { top: 16vh; }
}