/* Hero reference: Figma 26:40, CTA 95:2838; 1512 × 1092 desktop canvas.
   Scope tokens here so subsequent sections stay pending visual review. */
.hero {
  --ink:#0d0d0d;
  --orange:#e35831;
  --hero-scale:min(calc(100vw / 1512), calc(100svh / 1092));
  height:100vh;
  height:100svh;
  min-height:780px;
  max-height:none;
  background:var(--ink);
  isolation:isolate;
}
.hero-background {position:absolute;inset:0;overflow:hidden;z-index:-1;background:#0d0d0d;pointer-events:none}
.hero-background::before {
  content:'';position:absolute;left:-2.97619%;top:-10.07326%;width:105.95238%;height:110.07326%;
  background:linear-gradient(to bottom,rgba(13,13,13,0) 85%,rgba(13,13,13,.2)),url('../hero/background.webp') center/cover no-repeat;
  filter:blur(2px);
}
.hero-background::after {content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent calc(100% - 250px),#0d0d0d),rgba(13,13,13,.5)}
.hero-art {left:calc(50% - 487 * var(--hero-scale));top:calc(-108 * var(--hero-scale));width:calc(974 * var(--hero-scale));height:calc(974 * var(--hero-scale))}
.hero-logo {width:100%;height:auto;max-width:none}
.hero .hero-anchor {position:absolute;left:calc(50% - 597 * var(--hero-scale));top:calc(53 * var(--hero-scale));width:calc(1194 * var(--hero-scale));height:calc(897 * var(--hero-scale))}
.hero-copy {left:50px;top:calc(656 * var(--hero-scale));bottom:auto;width:574px;max-width:calc(100% - 100px);font-size:20px;font-weight:300;letter-spacing:.44px;z-index:5}
.hero-copy p {line-height:30px}
.hero-copy .hero-tag {margin:0;font-family:inherit;text-transform:none;font-size:25px;font-weight:700;line-height:31px;letter-spacing:-.27px}
@media(max-width:760px) {
 .hero {--hero-scale:min(.43px,calc(100vw / 900));min-height:740px;height:auto;padding-bottom:56px}
 .hero-art {top:calc(55px - 108 * var(--hero-scale))}
 .hero .hero-anchor {top:calc(55px + 53 * var(--hero-scale))}
 .hero-copy {position:relative;left:auto;top:auto;margin:0 24px;padding-top:calc(55px + 656 * var(--hero-scale));width:auto;max-width:none;font-size:17px;letter-spacing:.36px}
 .hero-copy .hero-tag {font-size:21px;letter-spacing:-.21px;line-height:28px}
 .hero-copy p {line-height:27px}
 .hero-background::before {background-position:center;left:-35%;width:170%;top:-4%;height:104%}
}
body:has(.hero) .site-header {top:28px;right:42px}
.menu-toggle, .menu-close {
  width:129px;
  height:40px;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:5px 12px;
  font:400 25px/1 Dime,sans-serif;
}
.menu-close {color:#0d0d0d}
.menu-mark {flex:none;max-width:none}
@media(min-width:761px) {
  .menu-panel {width:min(737px,49vw);height:min(1007px,calc(100dvh - 20px));background:#0d0d0d}
  .menu-links a {font-size:45px;line-height:45px}
  .menu-email a {font-size:50px;color:#e35831}
  .menu-panel .eyebrow {font-size:18px;line-height:18px}
  .menu-panel .nav-dot {background:#e35831}
}
body:has(.hero) .header-right {gap:12px}
body:has(.hero) .language-toggle {position:relative;padding:10px}
body:has(.hero) .language-toggle img {width:24px;height:24px}
@media(max-width:760px) {
 body:has(.hero) .site-header {top:18px;right:18px}
 .menu-toggle, .menu-close {width:115px;font-size:22px}
 body:has(.hero) .header-right {gap:6px}
}
@media(max-width:760px) {
 .hero {--hero-scale:min(.4px,calc(100vw / 1050));min-height:max(740px,100svh)}
}

/* The flight path uses the original transparent canvas. Position the detailed
   cutout at the same coordinates inside it. */
.flying-drone { aspect-ratio: 1024 / 770 }
.flying-drone .drone-body { position:absolute; width:94.67%; left:2.56%; top:36.75%; height:auto }
@keyframes hero-fade { from { opacity:0 } to { opacity:1 } }
@keyframes hero-nav-enter { from { opacity:0; translate:0 -24px } }
@keyframes hero-rise { from { opacity:0; translate:0 16px } }
@keyframes hero-lines { from { opacity:0; translate:0 16px; clip-path:inset(0 0 100%) } to { opacity:1; translate:0 0; clip-path:inset(0) } }
@keyframes drone-lift { from { opacity:0; translate:0 27svh } to { opacity:1; translate:0 0 } }
@keyframes drone-wind {
  0%,100% { transform:translateX(-4px) rotate(-.3deg) }
  50% { transform:translateX(4px) rotate(.3deg) }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-enter .hero-background { animation:hero-fade .5s ease-out backwards }
  .hero-enter .site-header { animation:hero-nav-enter .5s ease-out backwards }
  .hero-enter .hero-logo { animation:hero-fade .45s .5s ease-out backwards }
  .hero-enter .hero-tag { animation:hero-rise .4s .9s ease-out backwards }
  .hero-enter .hero-copy p { animation:hero-lines .6s 1.17s ease-out backwards }
  .hero-enter .hero .cta:not(:focus-visible) { animation:hero-rise .4s 1.65s ease-out backwards }
  .flying-drone .drone-body { animation:drone-wind 5s ease-in-out infinite }
  .hero-enter .flying-drone .drone-body { animation:drone-lift 1.15s 1.98s cubic-bezier(.16,1,.3,1) backwards, drone-wind 5s ease-in-out infinite }
}

.menu-toggle > span, .menu-close > span { margin-bottom:-4px }
.hero-copy .hero-tag + p { margin-top:12px }
/* Dialog starts 10px inside the viewport, plus its 1px border. */
.menu-close { left:19px; top:17px }
.menu-mark { width:15px; object-fit:contain }
.menu-links a { display:flex; align-items:center; gap:20px }
.menu-links .nav-dot { flex:none; margin:0; transform:translateY(-2px) }
.menu-language { position:absolute; right:24px; top:17px; z-index:1 }
.language nav {
  display:grid; gap:.35rem; min-width:4.2rem; padding:.5rem;
  top:calc(100% + .7rem); right:50%; transform:translateX(50%);
  background:#0d0d0d; border:1px solid white; border-radius:1.5rem;
  box-shadow:0 3px 8px #0004; z-index:2;
}
.language nav[hidden] { display:none }
.language nav a {
  display:flex; align-items:center; justify-content:center;
  min-height:2rem; padding:0; border-radius:100%; color:white; font:400 1rem/1 Dime,sans-serif;
}
.language nav a[aria-current] { color:#0d0d0d; background:#e35831 }
.language nav a:is(:hover,:focus-visible) { background:white; color:#0d0d0d }
@media(max-width:760px) {
  .menu-close { left:7px; top:7px }
  .menu-language { top:7px }
}

.menu-panel { overflow:hidden; padding:0 }
.menu-scroll {
  position:absolute; inset:90px 12px 30px;
  padding:10px max(12px,calc(3.2vw - 12px)) 4px;
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:white transparent;
  overscroll-behavior:contain;
}
@media(max-width:760px) {
  .menu-scroll { inset:75px 10px 22px; padding:10px 15px 4px }
}

.flying-drone.is-landing .drone-body { animation:none; transform:none }

.menu-toggle.is-scrolled:not(:hover):not([aria-expanded="true"]) { background-color:#000 }

.header-left { display:flex; align-items:center; gap:8px }
.back-to-top {
  display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:1px solid white; border-radius:50%; background:#000; color:white;
  visibility:hidden; opacity:0; transition:opacity .24s ease, visibility 0s .24s;
}
.menu-toggle.is-scrolled + .back-to-top { visibility:visible; opacity:1; transition-delay:0s }
.back-to-top:is(:hover,:focus-visible) { color:#e35831 }
@media(prefers-reduced-motion:reduce) { .back-to-top { transition:none } }

.drone-grip { position:absolute; inset:0; pointer-events:none }
@media (any-hover:hover) and (any-pointer:fine) {
  html:not(.hero-enter) .flying-drone.in-hero .drone-grip img {
    pointer-events:auto;
    user-select:none;
    cursor:url('../icon/handopen.svg') 11 9, grab;
  }
  html.drone-held, html.drone-held * { cursor:url('../icon/handhold.svg') 11 11, grabbing !important }
}

.drone-body img { display:block; width:100%; height:auto }
.drone-body::before, .drone-body::after {
  content:''; position:absolute; z-index:1; pointer-events:none;
  width:.65%; height:6%; border-radius:50%;
  background:#eaffef; box-shadow:0 0 2px 1px #76ff91, 0 0 7px 3px #24ff61, 0 0 13px #24ff61;
  opacity:.35;
}
.drone-body::before { left:17.45%; top:55.5%; transform:rotate(-22deg) }
.drone-body::after { left:80.55%; top:52%; transform:rotate(22deg) }
@keyframes arm-light-pulse {
  0%, 9%, 14%, 23%, 100% { opacity:.06 }
  2%, 6%, 16%, 20% { opacity:1 }
}
@media (prefers-reduced-motion:no-preference) {
  .drone-body::before, .drone-body::after { animation:arm-light-pulse 2s linear infinite }
}

.drone-downlight {
  position:absolute; left:49.5%; top:86%; width:1%; min-width:2px;
  aspect-ratio:2; border-radius:50%; background:white; opacity:0; pointer-events:none;
  box-shadow:0 1px 3px white, 0 3px 8px 2px #fff9;
}
@keyframes drone-takeoff-light { 0%,100% { opacity:0 } 8%,90% { opacity:1 } }
@media (prefers-reduced-motion:no-preference) {
  .hero-enter .drone-downlight { animation:drone-takeoff-light 1.15s 1.98s both }
  .changing-altitude .drone-downlight { opacity:1 }
  .changing-altitude .drone-body::before, .changing-altitude .drone-body::after { animation-duration:1.4s }
}

.cursor-dot {
  position:fixed; z-index:1100; width:10px; height:10px; pointer-events:none;
  background:white; mix-blend-mode:difference; border-radius:50%;
  transform:translate(-50%, -50%); transition:width .16s, height .16s;
}
.cursor-dot.over-control { width:20px; height:20px }
@media (any-hover:hover) and (any-pointer:fine) {
  html.dot-active:not(.drone-held), html.dot-active:not(.drone-held) * { cursor:none }
  html.dot-active:not(.hero-enter):not(.drone-held) .flying-drone.in-hero .drone-grip img {
    cursor:url('../icon/handopen.svg') 11 9, grab;
  }
}

@media (prefers-reduced-motion:no-preference) {
  .flight-scene :is(.hero-copy,.about-copy,.pricing-heading h2) { transition:opacity .55s ease-out }
  .flight-leaving :is(.hero-copy,.about-copy,.pricing-heading h2) { animation:flight-blow-away .48s ease-in both }
  .flight-backwards { --wind-x:12vw; --wind-y:24px; --wind-angle:4deg }
  .flight-arriving :is(.hero-copy,.about-copy,.pricing-heading h2) { opacity:0; transition:none }
}
/* The alternating layout puts the copy on the right only on desktop. */
@media (min-width:761px) {
  .about-section.reverse { --wind-x:12vw; --wind-angle:4deg }
  .about-section.reverse.flight-backwards { --wind-x:-12vw; --wind-angle:-4deg }
}
@keyframes flight-blow-away {
  from { opacity:1; transform:none }
  to { opacity:0; transform:translate(var(--wind-x,-12vw),var(--wind-y,-24px)) rotate(var(--wind-angle,-4deg)); filter:blur(3px) }
}

.media-dialog > .cursor-dot { position:absolute }