/* ============================================================
   BuzzLife Global Limited — "Space is the goal, not the sky"
   ============================================================ */

:root{
  --bg:#16171a;
  --bg-alt:#1d1e23;
  --card-bg:#1f2025;
  --card-bg-2:rgba(22,23,27,0.72);
  --border:rgba(255,255,255,0.09);
  --border-soft:rgba(255,255,255,0.06);
  --accent:#2f9bff;
  --accent-bright:#7cc9ff;
  --accent-dim:#1c5f96;
  --accent-glow:rgba(47,155,255,0.38);
  --text:#f3f4f6;
  --text-dim:#b6bac2;
  --text-faint:#82868f;
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --container:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }

#grain-overlay{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- GSAP-driven scroll choreography ----------
   Animated elements are pre-hidden ONLY when JS is running (html.js), so a
   visitor without JS still sees every word. GSAP sets inline styles that
   override these. */
.js [data-anim], .js [data-hero-in]{ opacity:0; }

/* SplitText line masking — a little breathing room so descenders (g, y, p)
   are not clipped by the mask when the line settles. */
.anim-line{ padding-bottom:.12em; }

/* ---------- emphasised words in headings ---------- */
.hl{ font-weight:700; color:var(--accent-bright); }

/* ---------- twist image reveal (repeating slide-in / slide-out) ---------- */
/* Applied to the existing image wrapper boxes (.pillar-icon / .project-card-img) so the
   whole card — border-radius + overflow:hidden included — twists as one rigid unit;
   toggled by a non-unobserving IntersectionObserver in main.js, so it plays every time
   the element enters/leaves the viewport, not just once. */
.twist-img{
  opacity:0;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  will-change:transform, opacity;
}
.twist-img.twist-a{ transform:perspective(1000px) rotateY(32deg) rotateZ(-4deg) translateX(-42px) scale(.9); }
.twist-img.twist-b{ transform:perspective(1000px) rotateY(-32deg) rotateZ(4deg) translateX(42px) scale(.9); }
.twist-img.visible{ opacity:1; transform:perspective(1000px) rotateY(0deg) rotateZ(0deg) translateX(0) scale(1); }

/* ============ NAVBAR ============ */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);
  background:transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:rgba(15,16,19,0.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border-soft);
  padding:12px clamp(20px,4vw,56px);
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ border-radius:8px; }
.nav-logo span{ font-family:var(--font-display); font-weight:600; letter-spacing:.2px; font-size:1.02rem; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:.92rem; color:var(--text-dim); font-weight:500;
  position:relative; padding:4px 0; transition:color .25s;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px;
  background:var(--accent-bright); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.lang-switch{ display:flex; gap:4px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:999px; padding:3px; margin-left:8px; }
.lang-btn{
  font-family:var(--font-body); font-size:.76rem; font-weight:600; letter-spacing:.3px;
  padding:5px 12px; border-radius:999px; border:none; background:transparent; color:var(--text-faint);
  cursor:pointer; transition:all .25s var(--ease);
}
.lang-btn:hover{ color:var(--text); }
.lang-btn.active{ background:var(--accent); color:#04101c; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:1100; }
.nav-toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position:relative; height:100vh; min-height:560px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; }
.hero-bg-img{
  width:100%; height:100%; object-fit:cover; object-position:center 60%;
  animation:kenburns 26s ease-in-out infinite alternate;
  filter:saturate(1.05);
}
@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.09) translate(-1%,-1%); }
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(10,12,16,0.05) 0%, rgba(10,12,16,0.55) 68%, rgba(10,12,16,0.92) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.35) 0%, rgba(10,12,16,0.25) 40%, rgba(10,12,16,0.85) 100%);
}
.starfield{ position:absolute; inset:0; width:100%; height:100%; }

/* WebGL globe. Starts invisible and only fades up once a context exists and
   the first frame is drawn, so a failed init leaves the photographic hero
   exactly as it was. */
.hero-globe{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero-globe.is-live{ opacity:1; }
/* Once the globe is running, drop the photograph back so it reads as
   atmosphere rather than competing with the scene. */
.hero.has-globe .hero-bg-img{ opacity:.34; transition:opacity 1.6s var(--ease); }
/* The vignette paints below the globe, so raising it darkens the photograph
   without dimming the wireframe — more contrast for both the globe and the
   headline sitting over it. */
.hero.has-globe .hero-vignette{ opacity:.95; }

.hero-content{ position:relative; z-index:5; max-width:780px; padding:0 24px; }
.eyebrow{
  font-size:.82rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:18px; font-weight:600;
}
.hero-headline{
  font-size:clamp(2.5rem, 8.4vw, 6.4rem); line-height:.98; letter-spacing:-.035em;
  font-weight:500;
  margin-bottom:26px; color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero-sub{
  font-size:clamp(1rem, 1.8vw, 1.22rem); color:var(--text-dim);
  max-width:600px; margin:0 auto 38px; font-weight:400;
}
.cta-button{
  display:inline-block; padding:15px 36px; border-radius:999px;
  background:linear-gradient(135deg, var(--accent-bright), var(--accent));
  color:#04101c; font-weight:700; font-size:.95rem; letter-spacing:.2px;
  box-shadow:0 0 0 rgba(47,155,255,0); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta-button:hover{ transform:translateY(-3px); box-shadow:0 12px 34px var(--accent-glow); }

.scroll-indicator{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,0.35); border-radius:14px;
  display:flex; justify-content:center; padding-top:8px; z-index:5;
}
.scroll-dot{ width:4px; height:8px; background:var(--accent-bright); border-radius:3px; animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(12px); opacity:0;} 100%{ opacity:0; } }

/* ============ SECTIONS (generic) ============ */
.section{ position:relative; padding:130px 24px; scroll-margin-top:84px; }
.section-inner{ max-width:var(--container); margin:0 auto; }
.kicker{
  font-size:.8rem; letter-spacing:2px; color:var(--accent-bright); font-weight:700;
  text-transform:uppercase; margin-bottom:16px;
}
.section h2{
  font-size:clamp(2.1rem, 5.4vw, 4.2rem); line-height:1.02; letter-spacing:-.03em;
  font-weight:500; margin-bottom:22px; color:#fff;
}
.lead{ color:var(--text-dim); max-width:700px; margin-bottom:52px; font-size:1.08rem; }

/* ============ STORY (brand film) ============ */
.story-section{ background:var(--bg-alt); }
.story-video-wrap{
  position:relative; max-width:900px; margin:0 auto;
  aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  background:#000; border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 70px -28px var(--accent-glow);
}
.story-video-wrap video{
  width:100%; height:100%; object-fit:cover; display:block; background:#000;
}

/* ============ ABOUT ============ */
.about-section{ background:var(--bg); }
.mv-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; margin-bottom:36px; }
.mv-card{
  background:var(--card-bg); border:1px solid var(--border); border-left:2px solid var(--accent);
  border-radius:14px; padding:26px 28px;
}
.mv-label{ display:block; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-bright); font-weight:700; margin-bottom:10px; }
.mv-card p{ color:var(--text-dim); font-size:.98rem; }

.values-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; padding:22px 0; border-top:1px solid var(--border-soft); }
.values-label{ font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.values-text{ color:var(--text); font-weight:500; }

.where-text{ padding-top:22px; border-top:1px solid var(--border-soft); color:var(--text-dim); }
.where-text strong{ color:var(--text); }

/* ============ SERVICES ============ */
.services-section{ background:var(--bg-alt); }
.pillars-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(255px,1fr)); gap:26px; }
.pillar-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:18px;
  padding:30px 26px; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar-card:hover{ transform:translateY(-7px); border-color:var(--accent-dim); box-shadow:0 20px 44px rgba(0,0,0,.35); }
.pillar-icon{
  width:60px; height:60px; border-radius:14px; overflow:hidden; margin-bottom:20px;
  border:1px solid var(--border-soft); background:#232327;
}
.pillar-icon img{ width:100%; height:100%; object-fit:cover; }
.pillar-card h3{ font-size:1.12rem; margin-bottom:10px; color:#fff; }
.pillar-card p{ color:var(--text-dim); font-size:.92rem; line-height:1.65; }

/* ============ PROJECTS ============ */
.projects-section{ position:relative; overflow:hidden; padding:150px 24px; }
.projects-bg{ position:absolute; inset:0; z-index:0; }
.projects-bg-video{ width:100%; height:100%; object-fit:cover; object-position:center; }
.projects-vignette{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.72) 18%, rgba(10,12,16,.82) 82%, rgba(10,12,16,.94) 100%);
}
.projects-inner{ position:relative; z-index:2; }
.projects-section .lead{ color:var(--text-dim); }

.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(310px,1fr)); gap:28px; }
.project-card{
  background:var(--card-bg-2); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:20px; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.project-card:hover{ transform:translateY(-8px); border-color:var(--accent-dim); }
.project-card-img{ aspect-ratio:4/3; overflow:hidden; }
.project-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.project-card:hover .project-card-img img{ transform:scale(1.07); }
.project-card-body{ padding:26px; }
.project-category{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--accent-bright); background:rgba(47,155,255,0.12); border:1px solid rgba(47,155,255,0.28);
  padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.project-card h3{ font-size:1.2rem; margin-bottom:12px; color:#fff; }
.project-card-body p.project-body{ color:var(--text-dim); font-size:.92rem; line-height:1.65; margin-bottom:16px; }
.project-goal{ font-size:.87rem; color:var(--text); margin-bottom:10px; }
.project-goal .goal-label{ color:var(--accent-bright); font-weight:700; display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px; }
.project-status{ font-size:.82rem; color:var(--text-faint); font-style:italic; border-top:1px solid var(--border-soft); padding-top:12px; margin-top:6px; }

/* ============ MOMENTUM ============ */
.momentum-section{ background:var(--bg); }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:24px; }
.stat-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:16px;
  padding:32px 24px; text-align:center; transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.stat-card:hover{ transform:translateY(-6px); border-color:var(--accent-dim); }
.stat-num{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  background:linear-gradient(135deg, var(--accent-bright), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:6px;
}
.stat-label{ font-size:.9rem; font-weight:600; color:var(--text); text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; }
.stat-sub{ font-size:.85rem; color:var(--text-faint); line-height:1.55; }

/* ============ CONTACT ============ */
.contact-section{ background:var(--bg-alt); text-align:center; }
.contact-inner{ max-width:560px; margin:0 auto; }
.contact-inner .kicker{ justify-content:center; }
.contact-hq-label{ margin-top:26px; font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.contact-address{ color:var(--text-dim); margin-top:8px; margin-bottom:26px; }
.contact-email{
  display:inline-block; font-family:var(--font-display); font-size:1.5rem; font-weight:600;
  color:#fff; border-bottom:2px solid var(--accent); padding-bottom:4px; transition:color .3s, text-shadow .3s;
}
.contact-email:hover{ color:var(--accent-bright); text-shadow:0 0 24px var(--accent-glow); }

/* ============ FOOTER ============ */
.site-footer{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:52px 24px 40px; border-top:1px solid var(--border-soft); text-align:center;
}
.site-footer img{ border-radius:7px; opacity:.9; }
.footer-tagline{ color:var(--text-dim); font-family:var(--font-display); font-size:.95rem; }
.footer-rights{ color:var(--text-faint); font-size:.8rem; }

/* ============ PRELOADER ============ */
body.is-loading{ overflow:hidden; }
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.preloader-logo{ border-radius:12px; opacity:.95; }
.preloader-count{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(3.2rem, 12vw, 7.5rem); line-height:1; letter-spacing:-.05em;
  color:#fff; display:flex; align-items:flex-start;
}
.preloader-pct{
  font-size:.3em; margin-top:.55em; margin-left:.14em;
  color:var(--accent-bright); font-weight:600; letter-spacing:0;
}
.preloader-bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.07);
}
.preloader-bar-fill{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--accent-bright), var(--accent));
}

/* ============ JOURNEY TIMELINE ============ */
.timeline-block{ margin-top:92px; }
.timeline-heading{
  font-family:var(--font-display); font-weight:500; color:#fff;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing:-.025em;
  margin:0 0 42px;
}
.timeline{ position:relative; padding-left:40px; }
.timeline-track{
  position:absolute; left:11px; top:8px; bottom:8px; width:2px;
  background:var(--border); overflow:hidden; border-radius:2px;
}
.timeline-track-fill{
  display:block; width:100%; height:100%;
  transform:scaleY(1); transform-origin:top center;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
}
.timeline-items{ list-style:none; margin:0; padding:0; display:grid; gap:46px; }
.timeline-item{ position:relative; }
.timeline-dot{
  position:absolute; left:-34px; top:9px; width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(47,155,255,.14);
}
.timeline-year{
  display:inline-block; font-family:var(--font-display); font-size:.78rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--accent-bright);
  font-weight:700; margin-bottom:9px;
}
.timeline-title{
  font-family:var(--font-display); font-weight:600; color:#fff;
  font-size:clamp(1.12rem, 2.1vw, 1.45rem); margin:0 0 9px; letter-spacing:-.01em;
}
.timeline-body{ color:var(--text-dim); font-size:.95rem; line-height:1.72; max-width:640px; }

/* ---------- Projects: pinned horizontal mode ----------
   The .is-horizontal class is added by JS only when GSAP is present, the
   viewport is wide enough, and motion is allowed. Everything below therefore
   falls back to the normal vertical grid automatically. */
.projects-section.is-horizontal{
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:0; padding-bottom:0;
}
.projects-section.is-horizontal .projects-inner{ width:100%; }
/* Trimmed down versus the vertical layout: heading, lead and card all have to
   share one screen with the cards while the section is pinned. */
.projects-section.is-horizontal h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); margin-bottom:16px; }
.projects-section.is-horizontal .kicker{ margin-bottom:12px; }
.projects-section.is-horizontal .lead{ margin-bottom:26px; }
.projects-section.is-horizontal .projects-grid{
  display:flex; flex-wrap:nowrap; width:max-content;
  gap:30px; will-change:transform;
}
.projects-section.is-horizontal .project-card{
  flex:0 0 auto;
  width:min(86vw, 720px);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
}
/* Side-by-side inside the card keeps it short enough to sit in one screen
   alongside the heading — a tall 4:3 image would not fit. */
.projects-section.is-horizontal .project-card-img{
  aspect-ratio:auto; height:100%; min-height:250px;
}
.projects-section.is-horizontal .project-card-body{ padding:22px 24px; }
.projects-section.is-horizontal .project-card-body p.project-body{
  font-size:.85rem; line-height:1.55; margin-bottom:12px;
}
.projects-section.is-horizontal .project-card h3{ font-size:1.12rem; margin-bottom:9px; }
.projects-section.is-horizontal .project-goal{ font-size:.82rem; }
.projects-section.is-horizontal .project-status{ font-size:.78rem; padding-top:10px; }

@media (max-width: 1100px){
  .projects-section.is-horizontal .project-card{
    width:min(88vw, 560px);
    grid-template-columns:1fr;
  }
  .projects-section.is-horizontal .project-card-img{ min-height:0; aspect-ratio:16/9; }
}

/* ============ COMET CURSOR ============ */
.cursor-comet{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9998;
  display:none;            /* JS enables this only for fine pointers */
}

/* ============ AMBIENT SOUND TOGGLE ============ */
.sound-toggle{
  position:fixed; left:22px; bottom:22px; z-index:900;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--border); background:rgba(15,16,19,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.sound-toggle:hover{ border-color:var(--accent-dim); transform:translateY(-2px); }
.sound-toggle:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }
.eq{ display:flex; align-items:center; gap:3px; height:16px; }
.eq i{
  display:block; width:2px; height:4px; border-radius:2px;
  background:var(--text-faint); transition:background .3s;
}
.sound-toggle.is-on .eq i{ background:var(--accent-bright); animation:eqbounce 1s ease-in-out infinite; }
.sound-toggle.is-on .eq i:nth-child(2){ animation-delay:.18s; }
.sound-toggle.is-on .eq i:nth-child(3){ animation-delay:.36s; }
.sound-toggle.is-on .eq i:nth-child(4){ animation-delay:.12s; }
@keyframes eqbounce{ 0%,100%{ height:4px; } 50%{ height:15px; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:rgba(15,16,19,0.98); backdrop-filter:blur(16px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    padding:40px; transform:translateX(100%); transition:transform .4s var(--ease);
    border-left:1px solid var(--border);
  }
  .nav-links.open{ transform:translateX(0); }
  .lang-switch{ margin-left:0; margin-top:10px; }
  .section{ padding:96px 20px; }
  .timeline-block{ margin-top:64px; }
  .timeline{ padding-left:32px; }
  .timeline-track{ left:7px; }
  .timeline-dot{ left:-30px; width:9px; height:9px; }
  .timeline-items{ gap:38px; }
  .sound-toggle{ left:16px; bottom:16px; width:40px; height:40px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-bg-img{ animation:none; }
  .twist-img{ transition:none!important; opacity:1!important; transform:none!important; }
  /* Everything the motion system would have animated stays plainly visible. */
  .js [data-anim], .js [data-hero-in]{ opacity:1!important; transform:none!important; }
  .timeline-track-fill{ transform:scaleY(1)!important; }
  .sound-toggle.is-on .eq i{ animation:none; height:9px; }
  #preloader{ display:none!important; }
  .cursor-comet{ display:none!important; }
  .hero-globe{ display:none!important; }
  .hero.has-globe .hero-bg-img{ opacity:1; }
}