/* Approved Matrix composition. Canvas is shared across the entire hero. */
.hero-landing {
  --hero-paper:#eeede3; --hero-dim:#b6c4ba; --hero-gold:#b9a36b;
  --hero-serif:"ar-mingb5std","Songti TC",serif;
  --hero-sans:"ar-udjingxiheib5","PingFang TC",sans-serif;
  position:relative; isolation:isolate; display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center;
  gap:clamp(36px,5vw,88px); width:100%; min-height: min(820px,calc(100svh - 100px));
  padding:clamp(42px,6vh,80px) clamp(28px,6.8vw,114px) 44px;
  overflow:clip; color:var(--hero-paper); background:#030806; font-family:var(--hero-sans);
}
.hero-landing *, .hero-landing *::before, .hero-landing *::after {box-sizing:border-box}
.hero-landing__matrix {position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.hero-landing::before {position:absolute;inset:0;z-index:-3;content:"";background:radial-gradient(ellipse at 25% 34%,#102819 0,transparent 58%),#030806}
.hero-landing::after {position:absolute;inset:0;z-index:-1;content:"";pointer-events:none;background:linear-gradient(0deg,#030806f5 0%,#030806c9 12%,transparent 62%)}
.hero-landing__message {min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hero-landing__eyebrow {display:flex;align-items:center;gap:12px;margin:0 0 8px;color:#c1d2c5;font-size:14px;letter-spacing:.1em}
.hero-landing__eyebrow span {width:24px;height:1px;background:var(--hero-gold)}
.hero-landing .hero-type-stage {position:relative;width:100%;height:clamp(265px,26.5vw,430px);background:transparent;overflow:visible}
.hero-landing .hero-type-stage__final {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:0;opacity:1;font:700 clamp(30px,3.8vw,66px)/1.35 "PingFang TC",sans-serif;color:#ceffd9;pointer-events:none}
.hero-landing .hero-type-stage__final span {display:block;white-space:nowrap}
.hero-landing[data-canvas-ready="true"] .hero-type-stage__final {clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.hero-landing .hero-type-stage__status,.hero-landing .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-landing__copy {width:100%;margin-top:10px}
.hero-landing__mission {display:flex;flex-direction:column;margin:0;color:var(--hero-paper);font:500 clamp(20px,1.85vw,31px)/1.65 var(--hero-serif)}
.hero-landing__mission span {display:block;white-space:nowrap}
.hero-landing__dedication {margin:16px 0 0;color:var(--hero-dim);font-size:16px;line-height:1.8;text-wrap:pretty}
.hero-landing__actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-landing__actions .button {min-height:48px;padding:12px 18px;font-size:16px;gap:12px;white-space:nowrap;text-decoration:none;transition:background-color 140ms,color 140ms,border-color 140ms,transform 140ms}
.hero-landing__actions .button-primary {border:1px solid var(--hero-gold);color:#131b15;background:var(--hero-gold)}
.hero-landing__actions .button-primary:hover {background:#cfbb84;border-color:#cfbb84}
.hero-landing__actions .button-quiet {display:inline-flex;align-items:center;border:1px solid #a6bca370;color:var(--hero-paper);background:#06110ca3}
.hero-landing__actions .button-quiet:hover {background:#ffffff12;border-color:#c1d2c5}
.hero-landing__actions .button:active {transform:scale(.96)}
.hero-landing__actions .button span {color:currentColor}
.hero-landing__type-controls {display:flex;gap:8px;margin-top:16px}
.hero-landing__type-controls button {min-height:44px;padding:7px 10px;border:1px solid transparent;background:transparent;color:#b3c8ba;font:14px var(--hero-sans);cursor:pointer;transition:background-color 140ms,color 140ms,border-color 140ms,transform 140ms}
.hero-landing__type-controls button:hover:not(:disabled) {color:#ceffd9;background:#164b2633;border-color:#78a48566}
.hero-landing__type-controls button:active:not(:disabled) {transform:scale(.96)}
.hero-landing__type-controls button:disabled {opacity:.5;cursor:default}
.hero-landing button:focus-visible,.hero-landing a:focus-visible,.hero-landing__film-frame:focus-visible {outline:2px solid #c3ffd1;outline-offset:4px}
.hero-landing__film {min-width:0;container-type:inline-size;align-self:center;padding:18px 20px 8px;border:1px solid #88c6a03d;border-radius:10px;background:#0c1c12b3;box-shadow:0 24px 80px #000a,0 0 40px #1b7c2a12;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-landing__film-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hero-landing__film-heading h2 {margin:0;color:var(--hero-paper);font:500 clamp(22px,2vw,30px)/1.4 var(--hero-serif);letter-spacing:.06em}
.hero-landing__film-heading a {display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#c1d2c5;font-size:14px;text-decoration:none;transition:color 140ms}
.hero-landing__film-heading a:hover {color:#ceffd9}
.hero-landing__film-frame {display:block;width:100%;height:calc(56.25cqi + 126px);border:0;background:transparent;border-radius:3px}
.hero-landing[data-film-playing="true"]::after {background:linear-gradient(0deg,#030806f5 0%,#030806b8 28%,transparent 90%)}
@media(min-width:1800px){.hero-landing{padding-inline:max(114px,calc((100vw - 1572px)/2))}}
@media(max-width:1100px) and (min-width:901px){.hero-landing{padding-inline:36px;gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.hero-landing__actions .button{padding-inline:13px;font-size:15px}.hero-landing__mission{font-size:20px}.hero-landing__film{padding-inline:14px}}
@media(max-width:900px){.hero-landing{grid-template-columns:minmax(0,1fr);min-height:0;padding:38px clamp(20px,5vw,48px) 36px;gap:32px}.hero-landing__message{width:100%;max-width:650px;margin-inline:auto}.hero-landing .hero-type-stage{height:clamp(245px,64vw,400px);max-width:560px}.hero-landing__mission{font-size:clamp(20px,3.5vw,29px)}.hero-landing__film{width:100%;max-width:760px;margin-inline:auto;padding:14px 14px 6px}.hero-landing__film-heading{margin-bottom:10px}.hero-landing__film-frame{height:calc(56.25cqi + 126px)}}
@media(max-width:500px){.hero-landing{gap:24px}.hero-landing .hero-type-stage{height:clamp(230px,68vw,300px)}.hero-landing__eyebrow{letter-spacing:.05em}.hero-landing__mission{font-size:20px}.hero-landing__dedication{font-size:16px}.hero-landing__actions{gap:10px;width:100%}.hero-landing__actions .button{font-size:15px;flex:1;padding-inline:12px;gap:6px}.hero-landing__film{padding:10px 10px 4px}.hero-landing__film-heading a{font-size:14px}.hero-landing__type-controls{margin-top:8px}}
@media(max-width:360px){.hero-landing__mission{font-size:18px}.hero-landing__actions{flex-direction:column}.hero-landing .hero-type-stage{height:230px}.hero-landing__film{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.hero-landing__type-controls button,.hero-landing__actions .button,.hero-landing__film-heading a{transition:none}.hero-landing button:active,.hero-landing__actions .button:active{transform:none}}
/* Keep the glass filter on a bounded paint layer, away from the live iframe. */
.hero-landing__film {position:relative;isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 24px 80px #000a}
.hero-landing__film::before {position:absolute;inset:0;z-index:-1;content:"";border-radius:inherit;background:#0c1c1299;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
@font-face {font-family:"Guardian Gothic Black";src:url("./assets/fonts/hero-gothic-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Image-matched revision: luminous rain, wider Gothic blocks, transparent rim. */
.hero-landing {gap:clamp(28px,3.8vw,64px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding-inline:clamp(28px,6vw,100px)}
.hero-landing::before {background:radial-gradient(ellipse at 24% 26%,#06321a 0%,#03180b77 50%,transparent 80%),#020705}
.hero-landing::after {background:radial-gradient(ellipse at 18% 86%,#020705ee 0%,#020705aa 20%,transparent 56%)}
.hero-landing .hero-type-stage {height:clamp(300px,27vw,450px)}
.hero-landing__mission {font-size:clamp(24px,2.45vw,38px);line-height:1.55}
.hero-landing__film {padding:8px 10px 6px;border:1px solid #b7f8c8aa;border-radius:10px;background:transparent;box-shadow:0 0 1px #eefff0,0 0 24px #49ef7e24,0 20px 70px #0008;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-landing__film::before {background:#0923152b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.hero-landing__film-heading {margin:0 8px 6px}
.hero-landing__film-heading h2 {font-size:22px}
.hero-landing__film-frame {height:56.25cqi;border-radius:4px}
@media(max-width:1100px) and (min-width:901px){.hero-landing{padding-inline:32px;gap:28px}.hero-landing__mission{font-size:24px}.hero-landing .hero-type-stage{height:320px}}
@media(max-width:900px){.hero-landing{grid-template-columns:minmax(0,1fr);padding-inline:clamp(20px,5vw,48px);gap:28px}.hero-landing .hero-type-stage{height:clamp(285px,72vw,430px)}.hero-landing__mission{font-size:clamp(22px,4vw,29px)}.hero-landing__film-frame{height:56.25cqi}}
@media(max-width:500px){.hero-landing .hero-type-stage{height:clamp(260px,75vw,350px)}.hero-landing__mission{font-size:20px}.hero-landing__film{padding:5px 6px 4px}.hero-landing__film-heading{margin-inline:5px;margin-bottom:3px}.hero-landing__film-heading h2{font-size:21px}}
@media(max-width:360px){.hero-landing__mission{font-size:18px}.hero-landing .hero-type-stage{height:250px}}
/* Match the accepted image's two-column alignment, rather than centering a small card. */
.hero-landing {align-items:start;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
.hero-landing .hero-type-stage {height:var(--aligned-stage-height,clamp(300px,27vw,450px))}
.hero-landing__film {align-self:start}
.hero-landing__dedication {font-size:clamp(14px,1.1vw,17px);line-height:1.8;white-space:nowrap;text-wrap:initial}
.hero-landing__film-frame {height:calc(56.25cqi + 52px)}
@media(max-width:1100px) and (min-width:901px){.hero-landing__mission{font-size:22px}.hero-landing__dedication{font-size:14px}}
@media(max-width:900px){.hero-landing{grid-template-columns:minmax(0,1fr)}.hero-landing .hero-type-stage{height:clamp(285px,72vw,430px)}.hero-landing__dedication{font-size:16px;white-space:normal;text-wrap:pretty}}
@media(max-width:500px){.hero-landing .hero-type-stage{height:clamp(260px,75vw,350px)}}
@media(max-width:360px){.hero-landing .hero-type-stage{height:250px}}
@media(max-width:900px){.hero-landing::after{background:linear-gradient(180deg,transparent 0%,#02070522 27%,#020705d9 44%,#020705d9 64%,transparent 84%)}}