:root {
  --orange-a: #FF8233;
  --orange-b: #FDAC55;
  --ink: #291a14;
  --pad: clamp(16px, 3.3vw, 60px);
  color-scheme: light;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; min-width: 0; min-height:100%; }
body { background:var(--orange-a); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid #20110d; outline-offset:5px; }
.page {
  isolation:isolate; position:relative; width:100%; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--orange-a) 0%, #FF9641 51%,var(--orange-b) 100%);
  overflow:hidden;
}
.page::before { content:''; pointer-events:none; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 46% 55% at 50% 44%,rgba(255,236,189,.35),transparent 81%); }
/* Header matches the previously approved orange reference. */
.header {
  position:relative; z-index:30; min-height:70px; flex:0 0 auto;
  margin:18px var(--pad) 0; padding:11px clamp(15px,1.8vw,31px);
  border:1px solid rgba(255,255,255,.17); border-radius:100px;
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  background:#39241e; color:white;
  box-shadow:0 12px 32px rgba(125,48,17,.12);
}
.brand { display:flex; flex-direction:column; flex:0 0 auto; line-height:1; }
.brand-logo { font-size:clamp(17px,1.8vw,25px); font-weight:900; letter-spacing:-.09em; display:flex; align-items:flex-start; }
.brand-dots { display:inline-flex; gap:2px; margin-top:0; margin-left:4px; }
.brand-dots i { display:block; width:6px; height:6px; background:#ff8040; border-radius:50%; }
.brand-dots i:last-child { width:4px; height:4px; background:white; }
.brand-tagline { margin-top:7px; color:rgba(255,255,255,.74); letter-spacing:.12em; font-size:6px; font-weight:700; }
.header-middle { font-size:9px; font-weight:800; letter-spacing:.22em; color:rgba(255,255,255,.7); white-space:nowrap; display:flex; align-items:center; gap:12px; }
.header-middle i { width:6px; height:6px; background:#fe813c; border-radius:50%; }
.header-follow { min-height:43px; display:flex; align-items:center; gap:22px; flex:0 0 auto; border:1px solid rgba(255,255,255,.24); padding:0 20px; border-radius:80px; font-size:10px; letter-spacing:.06em; font-weight:800; background:rgba(255,255,255,.09); transition:background .2s,transform .2s; }
.header-follow:hover { background:rgba(255,255,255,.20); transform:translateY(-2px); }
.header-follow svg,.footer svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hero { flex:1 1 auto; position:relative; min-height:630px; min-width:0; }
.eyebrow { position:absolute; z-index:7; top:4.3%; left:0; right:0; margin:0; display:flex; justify-content:center; align-items:center; gap:14px; font-weight:800; font-size:clamp(9px,.67vw,12px); letter-spacing:.21em; white-space:nowrap; color:rgba(53,31,21,.69); }
.eyebrow span { width:22px; height:1px; background:rgba(53,31,21,.25); }
/* Fixed-width text line with JS fitting; no WELCOME letters clipped at any width. */
.welcome-frame { position:absolute; z-index:1; top:7.5%; left:var(--pad); right:var(--pad); height:28%; display:flex; justify-content:center; align-items:flex-start; pointer-events:none; overflow:visible; }
.welcome { display:block; white-space:nowrap; width:max-content; flex:0 0 auto; line-height:.96; font-size:clamp(44px,17vw,300px); font-weight:900; letter-spacing:-.103em; color:rgba(255,255,255,.95); text-shadow:0 9px 22px rgba(166,75,21,.05); user-select:none; }
.welcome-dot { color:white; }
.character { position:absolute; z-index:5; left:50%; top:4.7%; height:85.5%; width:min(85vw,1000px); transform:translateX(-50%); pointer-events:none; display:flex; align-items:center; justify-content:center; }
/* Transparent fox PNG is an always-available fallback while video loads. */
.character-poster {
  position:absolute; width:auto; height:100%; max-width:100%; object-fit:contain; object-position:center;
  opacity:1; visibility:visible; transition:opacity .55s ease;
}
/* Original video actions, not simulated floating image animation.
   .character uses mix-blend-mode:darken so white in the opaque MP4 visually
   matches the orange hero background (not actual transparency). */
.character-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .55s ease;
}
.video-running .character {mix-blend-mode:darken;}
.video-running .character-video {opacity:1;visibility:visible;}
.video-running .character-poster {opacity:0;}
.brand-title { position:absolute; z-index:10; left:var(--pad); right:var(--pad); bottom:17%; pointer-events:none; text-align:center; }
.brand-title h1 { margin:0; font-weight:900; font-size:clamp(36px,8.1vw,148px); letter-spacing:-.091em; line-height:.95; color:white; white-space:nowrap; text-shadow:0 2px 2px rgba(69,29,17,.35),0 8px 18px rgba(162,63,28,.18); }
.brand-title h1 strong,.brand-title h1 span { font-weight:inherit; }
.brand-dot { color:#2c1911; }
.announcement { position:absolute; z-index:12; bottom:3.7%; left:15px; right:15px; text-align:center; }
.announcement-status { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:850; font-size:clamp(8px,.69vw,11px); letter-spacing:.17em; color:rgba(39,24,18,.88); }
.announcement-status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:white; box-shadow:0 0 0 4px rgba(255,255,255,.17); animation:statusPulse 2.7s ease-in-out infinite; }
.announcement p { margin:10px 0 0; font-size:clamp(16px,1.55vw,23px); line-height:1.25; font-weight:750; letter-spacing:-.046em; color:#291810; }
.announcement-dot { color:white; }
.footer { flex:0 0 auto; position:relative; z-index:20; margin:0 var(--pad) 10px; min-height:70px; border-top:1px solid rgba(55,29,21,.23); display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 6px 0; font-weight:750; }
.footer-signature { font-size:10px; letter-spacing:.11em; white-space:nowrap; }
.footer-signature span { opacity:.5; margin:0 5px; }
.footer-links { display:flex; align-items:center; gap:23px; }
.footer-links a { display:flex; align-items:center; gap:9px; font-size:11px; white-space:nowrap; transition:transform .2s; }
.footer-links a:hover { transform:translateY(-2px); }
.footer-links a span { font-size:9px; letter-spacing:.06em; opacity:.7; font-weight:800; }
.footer-rule { width:1px; height:19px; background:rgba(46,25,18,.3); }
@keyframes statusPulse { 50% { box-shadow:0 0 0 7px rgba(255,255,255,.045); } }
/* Keep complete contents accessible on short-height desktop windows. */
@media (max-height:810px) and (min-width:761px) {
 .hero { min-height:580px; }
 .welcome-frame { top:7%; }
 .character { top:4%; height:85%; }
 .brand-title { bottom:16.5%; }
 .brand-title h1 { font-size:clamp(38px,7.3vw,125px); }
 .announcement { bottom:2.2%; }
 .footer { min-height:54px; }
}
@media (max-width:1000px) {
 .header-middle { font-size:8px; letter-spacing:.12em; }
 .character { width:90vw; }
 .brand-title h1 { font-size:8.25vw; }
}
@media (max-width:760px) {
 .header { margin:12px 14px 0; min-height:61px; padding:10px 15px; }
 .header-middle { display:none; }
 .brand-logo { font-size:19px; }
 .brand-tagline { font-size:5px; }
 .header-follow { min-height:36px; padding:0 11px; font-size:9px; gap:8px; }
 .header-follow svg { width:14px; height:14px; }
 .hero { min-height:620px; }
 .eyebrow { top:4.8%; font-size:9px; letter-spacing:.12em; gap:8px; }
 .eyebrow span { width:15px; }
 .welcome-frame { top:13.5%; left:9px; right:9px; height:15%; }
 .welcome { font-size:17vw; }
 .character { top:8.5%; height:72%; width:100vw; }
 .character-poster { height:100%; }
 .brand-title { left:10px;right:10px;bottom:14.2%; }
 .brand-title h1 { white-space:normal; font-size:clamp(37px,10.3vw,81px); letter-spacing:-.072em; line-height:.88; }
 .brand-title h1 strong { display:block; font-size:1.15em; }
 .announcement { bottom:4%; }
 .announcement-status { font-size:7.5px; letter-spacing:.11em; }
 .announcement p { font-size:clamp(14px,3.8vw,17px); margin-top:7px; }
 .footer { margin:0 16px 8px; min-height:74px; display:flex; justify-content:center; align-items:center; padding:7px 0 0; }
 .footer-signature {display:none;}
 .footer-links { gap:12px; }
 .footer-links a { gap:5px; font-size:11px; }
 .footer-links a span {display:none;}
 .footer-links svg { width:14px; height:14px; }
 .footer-rule {height:16px;}
}
@media (max-width:390px) {
 .brand-logo {font-size:17px;}
 .header-follow {font-size:8px;padding:0 9px;}
 .hero {min-height:565px;}
 .character {top:9%;height:70%;}
 .brand-title {bottom:14.7%;}
 .brand-title h1 {font-size:clamp(33px,10.2vw,40px);}
 .announcement {bottom:3.5%;}
 .announcement p {font-size:14px;}
 .footer-links a {font-size:10px;}
}
@media (max-width:350px) {
 .header {padding:8px 10px;}
 .brand-logo {font-size:15px;}
 .brand-tagline {font-size:4px;}
 .header-follow {font-size:7px;min-height:31px;}
 .hero {min-height:555px;}
 .footer-links {gap:7px;}
 .footer-links a {font-size:9px;}
 .footer-links svg {width:12px;height:12px;}
}
@media (max-height:710px) and (max-width:760px) {
 .hero { min-height:565px; }
 .character { height:71%; top:8%; }
 .brand-title { bottom:16.5%; }
 .announcement { bottom:3%; }
 .footer { min-height:57px; }
}
@media (prefers-reduced-motion:reduce) {
 .announcement-status i { animation:none; }
 .character-video,.character-poster {transition:none;}
 .header-follow { transition:none; }
}